我在学习JS,有点困惑)我试图按className选择页面中的所有元素,在其中找到具有type=hidden
的输入,并将输入的值取为变量。
为了更清楚,我将展示演示html。
<div class="demo_class">
<p>lorem ipsum</p>
<input type="hidden" value="some-value">
</div>
<div class="demo_class">
<p>lorem ipsum</p>
<input type="hidden" value="some-value">
</div>
<div class="demo_class">
<p>lorem ipsum</p>
<input type="hidden" value="some-value">
</div>
<div class="demo_class">
<p>lorem ipsum</p>
<input type="hidden" value="some-value">
</div>
还有一些JavaScript
var container = document.getElementsByClassName("demo_class");
for (var i = 0; i < container.length; i++) {
var inputValue = container[i].querySelectorAll("input[type=hidden]");
container[i].insertAdjacentHTML(
'afterbegin',
'<a href ="' + inputValue + '">Some text</a>'
);
}
在这个代码中,我找到了所有的demo_class
,在每个代码中都找到了input[type=hidden]
,但我对这个值无能为力。。带有代码
inputValue.value
没有定义。为什么?我做错了什么?
我不需要jQuery,我想学习JavaScript。
您不会得到值,而是得到元素本身。
更换
var inputValue = container[i].querySelectorAll("input[type=hidden]");
带有
var inputValue = container[i].querySelectorAll("input[type=hidden]")[0].value;
querySelectorAll()-返回结果数组(如果找到一个元素,则返回事件)
.value-设置/检索特定元素值的属性
请参阅此处的工作示例-此处
我认为您的问题取决于DOMContentLoaded事件,该事件在您执行代码时还没有触发。。。
function ExampleCtrl() {
'use strict';
var self = this;
self.hiddenInputs = document.querySelectorAll('[type="hidden"]');
self.result = document.getElementById('result');
for(var input, tpl, i = 0, len = self.hiddenInputs.length; i < len; i++) {
input = self.hiddenInputs[i];
tpl = '<span class="key">'+ (i + 1) +'</span><span class="value">'+ input.value +'</span>';
self.result.innerHTML += '<h1>'+ tpl +'</h1>';
}
}
document.addEventListener('DOMContentLoaded', ExampleCtrl);
#result {
padding: 1em .5em;
}
#result .key {
font-weight: bolder;
display: inline-block;
padding-right: 2em;
}
#result .value {
font-style: italic;
}
<div class="demo_class">
<p>lorem ipsum</p>
<input type="hidden" value="some-value">
</div>
<div class="demo_class">
<p>lorem ipsum</p>
<input type="hidden" value="some-value">
</div>
<div class="demo_class">
<p>lorem ipsum</p>
<input type="hidden" value="some-value">
</div>
<div class="demo_class">
<p>lorem ipsum</p>
<input type="hidden" value="some-value">
</div>
<div id="result">
</div>