Tomasz Grodzki2,821 Points
Why .textContent doesn't work with const input?
Almost everything's clear. I know how to use input and textContent. But all in all, why input.textContent doesn't work?
const input = document.querySelector ( "input" ); const p = document.querySelector ( "p.description" ); const button = document.querySelector ( "button" ); //button.addEventListener ( 'click', () => p.textContent = input.textContent + ':' ) <--- why it doesn't work the same like this line below? button.addEventListener ( 'click', () => p.textContent = input.value + ':' )
When u use query selectors u have to specify the class or the id u used to define the element in the html
I checked https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input for information on the "textContent" attribute of an <input> tag. According to the first link, textContent returns all elements within a node (some top-level container on a web page, not to be confused with the web server node.js). According to the Chrome browser, <input> must have inherited the attribute from <node>.
However, per the second link provided above, "textContent" is not even listed as an attribute of <input>. I don't think that it should be, because <input> is a self-closing tag. The <input> element cannot contain nodes, because that would require it to have a corresponding </input> tag. The creature simply does not exist.
I assume that the browser that didn't catch the problem of the missing "textContent" attribute of <input> must have a bug. As I write this, Google Chrome is not complaining about the missing attribute. It quietly gives me an empty string.
I hope this helps answer your question.