two different button questions

[james438]

<form name="editform" action="#">
<img id="img" src="" style="width:250px;" alt="">
<button onclick="newi1();return false;">prev</button>
<button onclick="newi2();return false;">original image</button>
<button onclick="newi() ;return false;">next</button>
<br><br>
Image File:
<br><input type="text" name="outputtext">
</form>

<script type="text/javascript">
function newi(){
if(newi.Num > newi.ar.length - 1){
newi.Num = 0;
newi.img.src = '/images/screenshots/' + newi.ar[newi.Num];
}
else{
newi.img.src = '/images/screenshots/' + newi.ar[newi.Num];
}
newi.output.value = newi.ar[newi.Num];++newi.Num;return false;
}

function newi1(){--newi.Num;
if(newi.Num < 0 ){newi.Num = newi.ar.length - 1;}
newi.img.src = 'images/screenshots/' + newi.ar[newi.Num];
newi.output.value = newi.ar[newi.Num];return false;
}

function newi2(){
newi.Num = 0;
newi.img.src = 'images/screenshots/' + newi.ar[newi.Num];
newi.output.value = newi.ar[newi.Num];return false;
}

newi.Num = 0;
newi.ar = new Array(ggit1.jpg,ggit2.jpg,ggit3.jpg,ggit4.jpg,ggit5.jpg);
newi.img = document.getElementById('img');
newi.output = document.forms.editform.elements.outputtext;
newi();
</script>

First question: why does the error listed above where the parts of the array are not placed in single quotes cause the buttons to go to an url?

Second question: when the parts of the array are placed in single quotes everything is fine, but why is it that sometimes you have to push a button twice to get an action? Try pushing the buttons in different orders and you will see what I mean. The only button that always works with only one click is the middle button. http://www.animeviews.com/test/test26.php

[jscheuer1]

The form submits.
In newi() you increase the number at the end. In newi1() you decrease the number at the beginning.


Try:


<form name="editform" action="#">
<img id="img" src="" style="width:250px;" alt="">
<button onclick="return newi(-1);">prev</button>
<button onclick="return newi();">original image</button>
<button onclick="return newi(1);">next</button>
<br><br>
Image File:
<br><input type="text" name="outputtext">
</form>

<script type="text/javascript">
function newi(n){
newi.Num += n || -newi.Num;
newi.Num = newi.Num < 0? newi.count - 1 : newi.Num % newi.count;
newi.img.src = '/images/screenshots/' + newi.ar[newi.Num];
newi.output.value = newi.ar[newi.Num];
return false;
}

newi.Num = 0;
newi.ar = new Array('ggit1.jpg','ggit2.jpg','ggit3.jpg','ggit4.jpg','ggit5.jpg');
newi.count = newi.ar.length;
newi.img = document.getElementById('img');
newi.output = document.forms.editform.elements.outputtext;
newi();
</script>

[james438]

Nice! I like that trick where you passed a value into the function using n. I never noticed that before because I am so used to variables having a $ before it. It is fun learning something new.

Your code worked, of course and it is simpler ;)

I am not sure what you meant by "the form submits." Could you explain that a bit more?

[jscheuer1]

Button was a non-standard element that was adopted, by most browsers, I believe even by the W3C standards, due to its widespread use. To be more standard one would use:


<input type="button" value="prev" onclick="whatever();">

However, even using that syntax, a form with no:


<input type="submit" . . . >

will submit for when at least one of its buttons is clicked, or upon hitting enter in a text input, which also happens when hitting enter when there is a submit button and only one text input. Using button elements may increase this tendency. Forms submit. That's what they do. Their main use is for server side code that does something with the information submitted. Forms are also required to have an action, yours does, but it is the default action, the one the form would have if no action is defined. The method is not required. GET is the default though. With GET, it (upon submit) launches the the page defined in the action attribute (in this case the same url that is in the address bar), with a query string (for example: ?something=somevalue&anotherthing=anothervalue) appended comprised of all of the named elements in the form and their values, if any.

By returning false, this is short circuited. Nothing submits. But if there is an error in your script code, it will have undefined or no return value, so the submission occurs.

So, like I said:

"The form submits."

[james438]

Thank you. That was makes a lot of sense now.