Log in

View Full Version : More Javascript Help Needed

The Ninja
January 9th, 2011, 11:31 AM
Ok, another javascript question. Heres the code:


<html>
<body>
<script type="text/javascript">

var _num = "1";
var _img = "http://tinyurl.com/ikty";
document.write("<img src="+_img+_num+" />");

</script>

<br>

<INPUT TYPE="button" VALUE="Back" onClick="" class="btswhite">
<INPUT TYPE="button" VALUE="Next" onClick="" class="btswhite">

</body>
</html>

My Question is based around the following pieces of code.

<INPUT TYPE="button" VALUE="Back" onClick="" class="btswhite">

and

<INPUT TYPE="button" VALUE="Next" onClick="" class="btswhite">

For the first one I need a code that decreases var _num by 1 when clicked. The second one must do the exact opposite(increase it by 1).

Thanks in advance.
PJay
January 9th, 2011, 11:52 AM
Don't claim to be an expert but I think you just make a function that does

_num++ or _num = _num + 1
and one that does
_num-- or -num = _num -1
The Ninja
January 9th, 2011, 03:11 PM
Don't claim to be an expert but I think you just make a function that does

_num++ or _num = _num + 1
and one that does
_num-- or -num = _num -1

I've tried that but it's not working. Perhaps I'm doing something incorrectly when I put it the parentheses. Heres what the code looks like now:


<html>
<body>
<script type="text/javascript">

var _num = "1";
var _img = "http://tinyurl.com/ikty";
document.write("<img src="+_img+_num+" />");

</script>

<br>

<INPUT TYPE="button" VALUE="Back" onClick="_num = _num - 1"
class="btswhite">

<INPUT TYPE="button" VALUE="Next" onClick="_num = _num + 1" class="btswhite">

</body>
</html>
Commander Thor
January 10th, 2011, 09:55 AM
If you intended for _num to be an number value, you should have declared it as such.
var _num = new Number(0);
_num = 1;
_num++ || _num--;

Alternately you could do:
parseInt(_num) + 1;
parseInt(_num) - 1;

This is just roughly speaking psudocode. Too tired to write actual example code. :P
The Ninja
January 10th, 2011, 06:17 PM
still not working but I'm not sure that I'm doing it correctly.
Commander Thor
January 10th, 2011, 07:10 PM
Sorry I didn't catch this before mate, you need a function that runs when the button is clicked, to tell the webpage to update the image.
The value of _num /is/ indeed actually changing when you click the next or back buttons, but the webpage doesn't know to load the new image, it was never told to do so.
I'm in the process of writing up some basic code now.
The Ninja
January 10th, 2011, 08:07 PM
thanks
Commander Thor
January 11th, 2011, 01:45 PM
Whoops, I had this typed out last night but forgot to post it. :p


<html>
<body>
<script type="text/javascript">

var _num = 0;
var _img = "http://tinyurl.com/ikty";
updatePage("+");

function updatePage(operator)
{
if (operator == "+") { addNum(); }
else { subNum(); }
document.write("<img src = "+_img+_num+" />");
drawButtons();
}
function addNum() { _num += 1; }
function subNum() { _num -= 1; }
function drawButtons()
{
document.write("<br />");
document.write("<INPUT TYPE=\"button\" VALUE=\"Back\" onClick=\"updatePage(\'-\');\" class=\"btswhite\">");
document.write("<INPUT TYPE=\"button\" VALUE=\"Next\" onClick=\"updatePage(\'+\');\" class=\"btswhite\">");
}
</script>

</body>
</html>


It's not really 'working' code (But it /does/ work, kind of), but it wasn't meant to be.
The Ninja
January 11th, 2011, 04:38 PM
lol this is almost funny. If there isn't another picture to load it just adds another set of buttons :P. I don't suppose you could explain how the code works? I'm a noob who eats information for breakfast so that I'm anti-noob.
PJay
January 11th, 2011, 05:01 PM
Looks like every time you click a button it runs updatepage which then runs drawbuttons which ... well you get the idea.

So you want to make the onclick for the buttons the addnum and subnum functions, not update page. You only want to call updatepage once when the page loads, or simpler put the html you are writing out with java in the the html page body (i.e. dont bother with java).
Commander Thor
January 11th, 2011, 09:30 PM
Looks like every time you click a button it runs updatepage which then runs drawbuttons which ... well you get the idea.

So you want to make the onclick for the buttons the addnum and subnum functions, not update page. You only want to call updatepage once when the page loads, or simpler put the html you are writing out with java in the the html page body (i.e. dont bother with java).

Partially correct here.

You do want to run updatePage() every time the buttons are clicked.


The code basically works like this:
The two variables are initialized (_num & _img)
Then updatePage() is ran for the first time, sending the character "+" to the function.

The function updatePage() runs, and it first checks if the operator sent to it is a +, if it is addNum() is ran, if it isn't subNum() is ran. addNum() & subNum() either add or subtract from _num.
Then it's told to write to the document "<img src = "+_img+_num+" />", then it's told to run drawButtons().
When drawButtons() runs, it writes a line break (<br />), then it writes the two buttons.
If you click one of the buttons, it runs the function "updatePage()" with the operator supplied to it.
So if you hit Back, it sends updatePage() a "-" character, if you hit Next, it sends updatePage() a "+" character.

updatePage() MUST be ran EVERY time the button is clicked, or the image on screen (Rather, the HTML behind the image) WILL NOT be updated, so the image won't change.


Really though, I agree with pjay1, you shouldn't bother with Javascript. Everything you're trying to do here can be acomplished with HTML4, and anything you would want to do can be acomplished with HTML5.