Question

<!DOCTYPE html>
<html>
<head>
<script>
function getElements()
{
  var v = document.getElementById('view');
  var x=document.getElementsByTagName("input");
  for(var i=0; i<x.length; i++){
  v.innerHTML = x[i].value+"<br>";
  }  
}
</script>
</head>
<body>

<input type="text" size="20"><br>
<input type="text" size="20"><br>
<input type="text" size="20"><br><br>
<input type="button" onclick="getElements()" value="How many input elements?">

<p id='view'></p>
</body>
</html>

这是我的代码，我想要获取字段的值并在"p"标记下面迭代它们，但它会一直显示最后一个输入的值，即提交值。

程序的本质是我从许多输入元素中获取数据，包括文件，上传字段，并将它们提交给服务器脚本。

Answer 1

你需要改变你的html和javascript如下，这不会给你按钮的值（这是不需要的）：

HTML：

<input type="text" size="20"><br>
<input type="text" size="20"><br>
<input type="text" size="20"><br><br>
    <button onclick="getElements()" value="How many input elements?" >How many input elements?</button>
<p id='view'></p>

JS：

function getElements()
{
  var v = document.getElementById('view');
    v.innerHTML = "";
  var x=document.getElementsByTagName("input");
  for(var i=0; i<x.length; i++){
      v.innerHTML += x[i].value+"<br>";
  }  
}

DEMO：http://jsfiddle.net/f7bLq0b4/

Answer 2

在代码中进行以下更改以使其正常工作。

<!DOCTYPE html>
<html>
<head>
<script>
function getElements()
{
  var v = document.getElementById('view');
  var x=document.getElementsByTagName("input");
  for(var i=0; i<x.length; i++){
  v.innerHTML += x[i].value+"<br>";
  }  
}
</script>
</head>
<body>

<input type="text" size="20"><br>
<input type="text" size="20"><br>
<input type="text" size="20"><br><br>
<button  onclick="getElements()">How many input elements?</button>

<p id='view'></p>
</body>
</html>

要附加字符串，您需要使用+ =。

使用getElementsByTagName（）方法从许多输入字段中获取数据

2 个答案: