Javascript help
Javascript help
How do I make it so when I hit a button with a javascript command, it doesn't disappear. I would like it to stay on the page without reloading or disappearing.
-
Jackolantern
- Posts: 10891
- Joined: Wed Jul 01, 2009 11:00 pm
Re: Javascript help
Inside the Submit function you are using as a callback, be sure to return FALSE at the end of the function. That keeps the page "form" from being submitted. I don't know anything about the button disappearing though, and have never seen anything like that.
The indelible lord of tl;dr
-
Jackolantern
- Posts: 10891
- Joined: Wed Jul 01, 2009 11:00 pm
Re: Javascript help
Just add
At the end of your callback function for the submit event.
If that doesn't make sense, can you post the code?
Code: Select all
return false;If that doesn't make sense, can you post the code?
The indelible lord of tl;dr
Re: Javascript help
Code: Select all
<html>
<head>
<script type= "text/javascript">
function showstats()
{
document.write(head);
document.write("<br>");
document.write(torso);
document.write("<br>");
document.write(rarm);
document.write("<br>");
document.write(larm);
document.write("<br>");
document.write(rleg);
document.write("<br>");
document.write(lleg);
}
var head = 100;
var torso = 100;
var rarm = 100;
var larm = 100;
var rleg = 100;
var lleg = 100;
function headhit()
{
head = head - 10;
showstats();
}
function torsohit()
{
torso = torso - 10;
showstats();
}
function rarmhit()
{
rarm = rarm - 10;
}
function larmhit()
{
larm = larm - 10;
}
function rleghit()
{
rleg = rleg - 10;
}
function lleghit()
{
lleg = lleg - 10;
}
showstats();
</script>
</head>
<body>
<div id =stay>
<center><button onclick=headhit()>(-_-)</button></center>
<br>
<center><button onclick=larmhit()>+--</button><button onclick=torsohit()>|</button><button onclick=rarmhit()>--+</button></center>
<br>
<center><button onclick=lleghit()>/</button><button onclick=rleghit()>\</button></center>
</div>
<script type = "text/javascript">
</script>
</body>
</html>-
Jackolantern
- Posts: 10891
- Joined: Wed Jul 01, 2009 11:00 pm
Re: Javascript help
Why are you using document.write? That is an old, old method and most JS interpreters have not optimized it, making it extremely slow. Instead, to add HTML to a page, set up a named div, get a reference to the div with document.getElementById(), and then use the innerHtml property to change its contents. That is how modern web developers change the HTML page, and can be over 10x faster than using document.write() (which, about 10+ years ago, was the only way to alter the page).
And you may also want to consider moving your event registration code into the script block, and off of the HTML elements themselves (these are the "onclick=..." in the HTML elements). There are a couple of reasons for this. First, you can only assign one callback per event with that method, whereas the modern code method allows many if you need them. Also, it is spreading around your JS events in the HTML, making it harder to reuse your JS scripts later. Read that tutorial I linked above all the way through. It is a bit long, but excellent at explaining JS events.
Anyway, as far as your original question goes, all of those methods are "callbacks" of your events. Lleghit, Larmhit, etc. Add
as the last line of those functions to prevent the page from submitting. What that does is it tells the browser you are handling the event, and to not bubble the event up to the browser's default event handling procedure, which is to submit the page (which, without a form, can cause the page to merely reload in some browsers).
I don't see anything that would cause the buttons to disappear. You are saying the buttons disappear when you click them? Perhaps adding return FALSE at the end of the functions will cause that to stop, since you may be triggering some kind of faulty default event handling in the browser.
And you may also want to consider moving your event registration code into the script block, and off of the HTML elements themselves (these are the "onclick=..." in the HTML elements). There are a couple of reasons for this. First, you can only assign one callback per event with that method, whereas the modern code method allows many if you need them. Also, it is spreading around your JS events in the HTML, making it harder to reuse your JS scripts later. Read that tutorial I linked above all the way through. It is a bit long, but excellent at explaining JS events.
Anyway, as far as your original question goes, all of those methods are "callbacks" of your events. Lleghit, Larmhit, etc. Add
Code: Select all
return false;as the last line of those functions to prevent the page from submitting. What that does is it tells the browser you are handling the event, and to not bubble the event up to the browser's default event handling procedure, which is to submit the page (which, without a form, can cause the page to merely reload in some browsers).
I don't see anything that would cause the buttons to disappear. You are saying the buttons disappear when you click them? Perhaps adding return FALSE at the end of the functions will cause that to stop, since you may be triggering some kind of faulty default event handling in the browser.
The indelible lord of tl;dr