Get input.value in loop

Question

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.

What's the difference I do it from the console devtools or directly write in code? — CroaToa, Dec 12 '15 at 09:16
@CroaToa Try this code, `var container = document.getElementsByClassName("demo_class"); for(var i = 0; i < container.length; i++) { (function (i) { var inputValue = container[i].querySelectorAll("input[type=hidden]"); container[i].insertAdjacentHTML( 'afterbegin', 'Some text' ); }(i)); }`, let me know if this work for you. — Tushar, Dec 12 '15 at 09:27
Working partial ) In href not value. In href `[object NodeList]` — CroaToa, Dec 12 '15 at 09:30
@CroaToa Your original [code works](http://jsfiddle.net/vcg4b9p6/1/) with a small change. As Adi has answered, you're not getting the value of input. — Teemu, Dec 12 '15 at 09:43
But tell me please, why in JSFiddle code works, but when I try to do that from console in this page for example (see my comment under Adi answer) it dont work? — CroaToa, Dec 12 '15 at 09:45
because jsFiddle runs the code withing iframe which listen to differen console — Adi Darachi, Dec 12 '15 at 09:52
But I dont run code in JSFiddle, I run it here, here is not iframe. Just run this code here, open devtools and run in console `var container = document.getElementsByClassName("js-gps-track"); for (var i = 0; i < container.length; i++) { var inputValue = container[i].querySelectorAll("div")[0].innerText; container[i].insertAdjacentHTML( 'afterbegin', 'Some text' ); }` This code must choose all divs with className `js-gps-track`, find into them `div`, get it text and append it into new element `a` — CroaToa, Dec 12 '15 at 09:56

Adi Darachi · Answer 1 · 2015-12-12T08:53:50.290

1

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

edited Dec 12 '15 at 08:53

answered Dec 12 '15 at 08:47

Adi Darachi

2,137
1
16
29

There is already undefined.. console write Uncaught TypeError: Cannot read property 'value' of undefined(…) – CroaToa Dec 12 '15 at 08:51
strangely.. For example open devtools to this page, there is a few blocks with class `js-gps-track` and try to get `answer-votes` text.. Its look like `var container = document.getElementsByClassName("js-gps-track"); for (var i = 0; i < container.length; i++) { var inputValue = container[i].querySelectorAll("div")[0].innerText; container[i].insertAdjacentHTML( 'afterbegin', 'Some text' ); }` and you got error `Cannot read property 'innerText' of undefined` I mean, do that in console – CroaToa Dec 12 '15 at 09:02

score 0 · Answer 2 · answered Dec 12 '15 at 10:01

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>

Get input.value in loop

2 Answers2