循环获取input.value

Question

我正在学习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。

Answer 1

您没有获得价值，但元素本身。

更换

var inputValue =   container[i].querySelectorAll("input[type=hidden]");

与

var inputValue =   container[i].querySelectorAll("input[type=hidden]")[0].value;

querySelectorAll（） -返回结果数组（如果找到一个元素则为事件）

.value-设置/获取特定元素的值的属性

请参阅此处的工作示例- 此处

Answer 2

我认为您的问题取决于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>