如何使用querySelectorAll和getAttribute？
我有这个HTML档案...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple II</title>
</head>
<body>
<div id="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter thing1: <input type="text" id="thing1" name="thing1" size="10" /></p>
<p>Enter thing2: <input type="text" id="thing2" name="thing2" size="10" /></p>
<p>Enter thing3: <input type="text" id="thing3" name="thing3" size="10" /></p>
<p>Check thing4: <input type="checkbox" id="thing4" name="thing4" value=1>
<input type="hidden" id="state" name="state" value="one" /></p>
</form>
<button id='clickme' name='clickme'>Click me</button>
</div>
<script src="simple2.js?0000000000002"></script>
</body>
</html>
...以及此javascript源文件...
document.querySelector("#results button").addEventListener("click", function(e) {
e.preventDefault();
var inputs = document.querySelectorAll("input");
var params;
var amp = "";
for( var i = 0; i < inputs.length; i++ ) {
var input = inputs[i];
var name = input.getAttribute(name);
var value = input.getAttribute(value);
params += amp + name + "=" + value;
amp = "&";
}
alert( params );
});
...，然后填写表格并单击按钮，我得到以下结果：
一切都是“空” :(我在这里做错了什么？
您需要引用getAttribute中的值
var name = input.getAttribute('name');
var value = input.getAttribute('value');
由于name和value原产于DOM元素虽然，你也可以简单地使用
var name = input.name;
var value = input.value;
另外，可以使用https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce来完成所有操作
document.querySelector("#clickme").addEventListener("click", function() {
alert([].reduce.call(document.querySelectorAll("input"),function(pre,cur){
return (pre == "" ? pre : pre+"&") + cur.name + "=" + cur.value;
},""));
});
| 归档时间： |
|
| 查看次数： |
4008 次 |
| 最近记录： |