Explain, please, why it does not work, I can not get value ?

 var doc = document, inputT = doc.querySelector('#inputText').value; el.innerHTML = inputT;

Only if you do this:

  el.innerHTML = inputT.value; 

 var doc = document, inputT = doc.querySelector('#inputText'), addElFirst = doc.querySelector('#dayBtn'), divP = doc.querySelector('#container'); function addElemToFirst() { //Поместить новый элемент первым. var el = doc.createElement('p'); //Создаем новый элемент p. el.innerHTML = inputT.value; divP.parentNode.insertBefore(el, divP.parentNode.firstChild); } addElFirst.addEventListener('click', addElemToFirst, false); 
 <input type="text" name="text" id="inputText" value=""> <button id='dayBtn'>День</button> <div><div id="container"></div></div>

  • what exactly is the problem? What is the inputText element? Why decided that you can not get the value ? Where to insert the string el.innerHTML = inputT.value; , did the previous code work as it should? - Grundy
  • I added the code and designed it so that it could be run. Check if the code works as it should - Mihanik71

3 answers 3

The problem with the code is that the value of the value field is a string and having received it once, it will not change on its own every time the value in the input field changes.

Since the value of the field can change before clicking the button, the only way to get the current value of the input field during a click is to take it directly from the input in the handler.

  • Alternatively, use MutationObserver and update the variable as it changes. - user207618 6:09 pm
  • @Other, yes, maybe there is not any particular benefit from this - Grundy
  • one
    Perhaps ... The cost of an observer may be more than the getter element. But how exotic - why not? - user207618

innerHTML - allows you to get the HTML content of the element as a string. The innerHTML property is available only on element nodes.

And value is the value of the field. Value is at INPUT, SELECT or TEXTAREA.

upd Understood the question.

I attach the code. Everything works.

 var doc = document, el = doc.querySelector('#el'), inputT = doc.querySelector('#inputText').value; el.innerHTML = inputT; 
 <input type="text" id="inputText" value="test"> <div id="el"></div>

  • All right, I'm trying to get the value from the input. then insert this value into the new item I created. - fara
  • And it does not work? - Mihanik71
  • Everything works)) You probably did not quite understand what I wanted to ask) - fara
  • @fara Added sample code - everything works for me. Something may not have written? - Mihanik71
  • I have everything just like you! BUT. maybe because I create a dynamically new element, so I do not work? I enclose my code above. - fara

  1. Code document.querySelector ('# inputText'); will give you a DOM element. To the question "what is the content of the element?" You can give three answers:

    1. The content of the element is the markup that is inside it. innerHTML, outerHTML is used for this.
    2. Like all the text inside it. TextContent or innerText is used. The textContent property is supported by all current browsers except IE. In IE, you can use the innerText property instead. But these properties are slightly different.
    3. The content of an element is all the nodes that are inside it. This is about how to understand the content.

  2. Now about the value property. properties in the DOM tree object are transferred from attributes (attributes of an element corresponding to an object node) + there are pure javascript properties, for example, length. the methods at the node object are all pure javascript. The value property is by no means all DOM objects. Usually this property contains what, for example, a person entered into the input or text field ( entered with his hands ), or what he selected with his hands in a select.