有人可以一点一点地向我解释这行代码:forprice.innerHTML=document.forms[0].eleme

can someone explain this line of code to me piece by piece: forprice.innerHTML=document.forms[0].elements[2].value;

本文关键字：一点 document innerHTML forprice forms eleme 解释 代码      更新时间：2023-09-26
forprice.innerHTML=document.forms[0].elements[2].value;

我明白 forprice 变量发生了变化(基本上是等式的左侧(，但我不明白的是形式[0] 部分和元素 [2]。重视部分我对元素的理解。值部分是它采用位于第二个位置的元素的任何值，或者可能是表单中的第二个元素。下面是整个页面的代码

-谢谢

<!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>&nbsp;</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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</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>

JavaScript 有效地查找 FIRST (0( '' 对象，然后是分配给表单中第三个元素的值。

第二个元素是名为 gundd 的选择。 该值将是选择哪个选项。# 如果未选择任何内容。

从右侧开始。

document.forms[0]

document.form 为您提供了 DOM 中所有表单的数组。 你可以简单地将 DOM 视为 html 页面上所有元素的集合。 forms[0] 表示你将得到数组中的第一个元素。 这就是名称="form1"的形式。所以。。

document.forms[0]
//points to
<form name="form1">...</form>

接下来是

document.forms[0].elements[2]

在类似的方面，它采用我们正在处理的形式，并给出表单中所有元素的数组。 这些不要与儿童混淆。 它只提供表单元素，如输入，选择。 不是 p 或 h1，即使它们在表单内。 [2] 表示我们得到数组中的第三个元素。 看起来这将是名称="转发"的输入。 请注意，选项元素不计算在内，因为它们都被视为选择的一部分。

最后

document.forms[0].elements[2].value;

.value 只是表示我们刚刚指向的元素的值。 那将是"前进"。

把它们放在一起。

forprice.innerHTML=document.forms[0].elements[2].value;

我们正在更改分配给变量"forprice"的dom元素，以便它的html内容等于"forward"。 这就是 .innerHTML 所做的 - 更改 html 元素标签之间的内容。 看起来 forprice 设置为一个带有 id="desc" 的元素，我找不到，但假设它在 javascript 之后看起来像这样。

<p id="desc">forward</p>
相关文章：