Why innerText,innerHTML property doesnt work on input tags in javascript?

by

So i stumbled upon following code

<!DOCTYPE html>
<html>
<body>

Name: <input type="text" id="myText" value="Mickey">

<p>Click the button to change the value of the text field.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("myText").value = "Johnny Bravo";
}
</script>

</body>
</html>

And not having used .value before in javascripte i thought to substitute it by innerText property but it just simply doesnt work !

I am having an idea that maybe as <input/> is a self closing tag that’s why innerText isnt able to insert in between it ? As such to insert in between an element there atleast should be 2 tags

SO can anyone consolidate this ? Or if not then why .innerText isnt working here instead of .value

39 thoughts on “Why innerText,innerHTML property doesnt work on input tags in javascript?”

  1. Because inner refers to the content that is "in between" the opening and closing tags of an element. For example:

    <p>This is the "innerText" or "textContent"</p>

    The <input> element doesn’t have a closing tag, so it can never contain any "inner" content. For these elements, use the .value property to access their content.

    There are other elements that do not have a closing tag, but in the following cases, the elements don’t have innerText or .value because they are not designed to store any data, only to have a semantic or structural effect on the HTML:

    • <area>
    • <base>
    • <br>
    • <col>
    • <colgroup> when the span is present
    • <command>
    • <embed>
    • <hr>
    • <img>
    • <input>
    • <keygen>
    • <link>
    • <meta>
    • <param>
    • <source>
    • <track>
    • <wbr>
    Reply

Leave a Comment