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.
To be more clear I'll show demo 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
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
inputValue.value
there is undefined. Why? What I doing wrong?
I no need jQuery, want to learn 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)
.value - Property to set/retrive the value of specific element
See here working example - here
I think that your problem depends on the DOMContentLoaded event, which isn't already fired when you exec your code...
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.