can someone explain this line of code to me piece by piece: forprice.innerHTML=document.forms[0].elements[2].value;
Question
forprice.innerHTML=document.forms[0].elements[2].value;
i understant that the forprice variable is changed (basically the left side of the equation) but what i dont understand is the forms[0] part and the elements [2]. value part-my understanding of the elements. value portion is that it takes whatever the value is of the element that is in the second position, or possibly the second elements in the form. below is the code for the whole page
-thanks
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
var imgs=new Array();
imgs[0]=new Image(400,400);
imgs[1]=new Image(400,400);
imgs[2]=new Image(400,400);
imgs[3]=new Image(400,400);
imgs[4]=new Image(400,400);
imgs[0].src="m&p45blackwithcase.jpg";
//the above image does not load for some reason... i have tried changing the array order to included this first,
imgs[1].src="m&p45optimized.jpg";
imgs[2].src="m&p45blackoptimized.jpg";
//eliminated image due to corruption
imgs[3].src="taurus24-7package.jpg";
imgs[4].src="taurus689.jpg";
var imgs2=new Array();
imgs2[0]=new Image(400,400);
imgs2[1]=new Image(400,400);
imgs2[2]=new Image(400,400);
imgs2[0].src="ammochart.jpg";
imgs2[1].src="HANDGUN_AMMUNITION_CHART.jpg";
imgs2[2].src="rifle-ammo-chart-optimized.jpg";
</script>
<script>
var i=0;
function forward(){
// alert ("function");
i++;
if(i==5){
i=0;}
document.main.src=imgs[i].src;
}
function backward (){
i--;
if(i==-1){
i=4;}
document.main.src=imgs[i].src;
}
function update(form){
var imgvalue=document.getElementById("imgslider");
whichimg=imgvalue.value;
document.main.src=imgs[whichimg].src;}
function selectthis (form){
var cntr;
// alert ("function");
cntr=form.ammodd.selectedIndex-1;
document.main2.src=imgs2[cntr].src;
/*
//forprice=document.getElementById("desc");
//forprice.innerHTML=document.forms[0].elements[2].value;
removed because it's not needed
var imgvalue2=document.getElementById("secondary");
whichimg=imgvalue2.value;
document.secondary.src=imgs2[whichimg].src;
*/
}
var forprice;
var cntr;
function selectthis (form){
cntr=form.gundd.selectedIndex-1;
document.main.src=imgs[cntr].src;
forprice=document.getElementById("price");
forprice.innerHTML=document.forms[0].elements[2].value;
}
</script>
</head>
<body>
<div align="center">
<table width="600" border="0">
<caption>
<h1>Firearms Deluxe Emporium Superstore Outlet Market Discount Megacenter</h1>
</caption>
<tbody>
<tr>
<td><div align="center"><a href="home.html">Home</a></div></td>
<td><div align="center"><a href="products(image1works).html">Products</a></div></td>
<td><div align="center"><a href="checkout(toplayfunctionworks).html">Checkout</a></div></td>
</tr>
</tbody>
</table>
<h1> </h1>
<p><img src="m&p45blackwithcase.jpg" name="main" width="640" height="480" id="main"/></p>
<form id="form1" name="form1" method="post" action ="">
<p>Just </p>
<select name ="gundd" onchange="selectthis(this.form)">
<option value ="#" selected="selected"> Choose one </option>
<option value ="400.00">Psychedelic View 1</option>
<option value ="450.00">Psychedelic View 2</option>
<option value ="500.00">Psychedelic View 3</option>
<option value ="871.00">Psychedelic View 4</option>
</select>
<table width="400" border="4">
<tr>
<td align="right"> <input type="button" name="backup" id="backup" value="back" onclick="backward()"/></td>
<td align ="left"> <input type="button" name="forwardon" id="forwardon" value="forward" onClick="forward()"/></td>
</tr>
<tr>
<td colspan="2" align="center"> <input type="range" id="imgslider" name="imgslider" min="0" max="4" value="0" step="1" onchange="update(this.form)"></td>
</tr>
</table>
</form>
<form id="form2" name="form2" method="post" action ="">
<p> </p>
<p> </p>
<p> </p>
<p><img src="bullitsassorted-optimized.jpg" id="main2" name ="main2" width="620" height="465" alt=""/></p>
<p> We have all types of rounds available. </p>
<p>Whatever your needs are, we can fill them. </p>
<p>
<select name="ammodd" onchange="selectthis(this.form)">
<option selected="#">We even have amunition</option>
<option>Rifle Rounds</option>
<option>Handgun Rounds</option>
<option>Uses</option>
</select>
</form>
</div>
</body>
</html>
2 answers
solution1
0 2014-12-02 21:56:21
JavaScript is effectively looking for the FIRST (0) `' object, then the value assigned to the third element within the form.
The second element is the select named gundd. The value would be which option is selected. # if nothing selected.
solution2
0 2014-12-02 22:17:38
Starting with the right side.
document.forms[0]
document.form gives you an array of all forms in the DOM. You can think of the DOM simply as a collection of all elements on the html page. forms[0] means you will get the first element in the array. This comes out to being the form with name="form1". So..
document.forms[0]
//points to
<form name="form1">...</form>
Next comes
document.forms[0].elements[2]
In a similar respect, this takes the form we are dealing with, and gives an array of all the elements in the form. These are not to be confused with children. It only gives the form elements like input, select. Not p or h1 even if they are inside the form. the [2] means we get the third element in the array. It looks like that would be the input with name="forwardon". Note, the option elements do not count since they are all considered part of the select.
Finally
document.forms[0].elements[2].value;
The .value simply means the value of the element we just pointed to. That would be "forward".
To put it all together.
forprice.innerHTML=document.forms[0].elements[2].value;
We are changing the dom element assigned to the variable "forprice" so that it's html contents will equal "forward". That is what the .innerHTML does - alter the contents between the tags of an html element. It appears forprice is set to an element with the id="desc" which i cannot find, but it would hypothetically look like this after the javascript.
<p id="desc">forward</p>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.