[英]Get input.value in loop
I'm learning JS, and a little confused) I'm trying to select all elements in page by className, find in them input that have type=hidden
, and take value of inputs to variable. 我正在学习JS,有点困惑)我正在尝试按className选择页面中的所有元素,在其中查找具有
type=hidden
输入,并将输入的值赋给变量。
To be more clear I'll show demo html. 更清楚地说,我将显示演示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>
And there is some JavaScript 还有一些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>'
);
}
in this code I find all demo_class
, in each of them find input[type=hidden]
, but I cant do nothing with there value.. with code 在这段代码中,我找到了所有
demo_class
,在每个代码中都找到了input[type=hidden]
,但是我无法对代码进行任何操作。
inputValue.value
there is undefined. inputValue.value
有未定义。 Why? 为什么? What I doing wrong?
我做错了什么?
I no need jQuery, want to learn JavaScript. 我不需要jQuery,想学习JavaScript。
you don't get the value, but the element it self. 您没有获得价值,但元素本身。
replace 更换
var inputValue = container[i].querySelectorAll("input[type=hidden]");
with 与
var inputValue = container[i].querySelectorAll("input[type=hidden]")[0].value;
querySelectorAll() - Returs array of results (event if it find one element)
querySelectorAll() -返回结果数组(如果找到一个元素则为事件)
.value - Property to set/retrive the value of specific element
.value-设置/获取特定元素的值的属性
I think that your problem depends on the DOMContentLoaded event, which isn't already fired when you exec your code... 我认为您的问题取决于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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.