Issue with reading and writing a name

Question

I am just learning js and have the following issue that I cannot seem to resolve. The object of the exercise is to read in the name when the button is clicked and then display a message that says "hello "

All of the functions are contained within the mainC div.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Sentence Diagrammer</title>
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <h1>Welcome to the Sentence Diagrammer!</h1>
    <h2>You can practice your diagramming skills here.</h2>
    <div id="container">
        <div id="mainL">
            <h1>Left Conatainer</h1>
        </div>

        <div id="mainC">
            <h1>This is the center</h1>
            <p>Please tell us your name</p>

            <p>I am <input id="theName" name="aName" type="text" /></p>
            <button onclick="validName()">Click</button>
            <p id="demo"></p>

            <input id="slide" type="range" min="1" max="10" step="1" onchange="displayPrelimQ(this.value)" />
            <span id="slideValue">1</span>

            <script type="text/javascript">
                function validName() {
                    var text1 = "hello";
                    var text2 = document.getElementById("theName").innerHTML;
                    document.getElementById("demo").innerHTML = text1 + text2;

                }
            </script>

            <script type="text/javascript">
                function displayPrelimQ(val) {
                    document.getElementById("slideValue").innerHTML = val;

                }
            </script>
        </div>

        <div id="mainR">
            <h1>right container</h1>
        </div>
    </div>
</body>
</html>

The issue I am having is that I cannot get the "Hello John" to print. If I comment out text2, I am able to print out text1. — joe, May 16 '18 at 02:45
Possible duplicate of [How do I get the value of text input field using JavaScript?](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) — JazZ, May 16 '18 at 02:48
While testing, I also realized that after I ran the script once, I needed to refresh the page before attempting to push the button again. — joe, May 16 '18 at 09:11

score 2 · Accepted Answer · answered May 16 '18 at 02:47

The issue is that the value of an input is not available through .innerHTML, but through .value. The following works:

function validName() {
    var text1 = "hello";
    var text2 = document.getElementById("theName").value;
    document.getElementById("demo").innerHTML = text1 + " " + text2;
}

Notice that an <input /> is a self closed tag. (i.e. it has no corresponding </input>). Thus, it's inner HTML doesn't make much sense, since it is always empty.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Sentence Diagrammer</title>
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <h1>Welcome to the Sentence Diagrammer!</h1>
    <h2>You can practice your diagramming skills here.</h2>
    <div id="container">
        <div id="mainL">
            <h1>Left Conatainer</h1>
        </div>

        <div id="mainC">
            <h1>This is the center</h1>
            <p>Please tell us your name</p>

            <p>I am <input id="theName" name="aName" type="text" /></p>
            <button onclick="validName()">Click</button>
            <p id="demo"></p>

            <input id="slide" type="range" min="1" max="10" step="1" onchange="displayPrelimQ(this.value)" />
            <span id="slideValue">1</span>

            <script type="text/javascript">
                function validName() {
                    var text1 = "hello";
                    var text2 = document.getElementById("theName").value;
                    document.getElementById("demo").innerHTML = text1 + " " + text2;

                }
            </script>

            <script type="text/javascript">
                function displayPrelimQ(val) {
                    document.getElementById("slideValue").innerHTML = val;

                }
            </script>
        </div>

        <div id="mainR">
            <h1>right container</h1>
        </div>
    </div>
</body>
</html>

score 0 · Answer 2 · answered May 16 '18 at 02:47

Because #theName is an input field, if you want to get the inputted value, you have to access its value property. For both inputs and textareas, to get the user input, use .value - for most other elements, to get their containing HTML, use innerHTML (or, if just text, textContent).

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Sentence Diagrammer</title>
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <h1>Welcome to the Sentence Diagrammer!</h1>
    <h2>You can practice your diagramming skills here.</h2>
    <div id="container">
        <div id="mainL">
            <h1>Left Conatainer</h1>
        </div>

        <div id="mainC">
            <h1>This is the center</h1>
            <p>Please tell us your name</p>

            <p>I am <input id="theName" name="aName" type="text" /></p>
            <button onclick="validName()">Click</button>
            <p id="demo"></p>

            <input id="slide" type="range" min="1" max="10" step="1" onchange="displayPrelimQ(this.value)" />
            <span id="slideValue">1</span>

            <script type="text/javascript">
                function validName() {
                    var text1 = "hello";
                    var text2 = document.getElementById("theName").value;
                    document.getElementById("demo").innerHTML = text1 + ' ' + text2;

                }
            </script>

            <script type="text/javascript">
                function displayPrelimQ(val) {
                    document.getElementById("slideValue").innerHTML = val;

                }
            </script>
        </div>

        <div id="mainR">
            <h1>right container</h1>
        </div>
    </div>
</body>
</html>

score 0 · Answer 3 · answered May 16 '18 at 02:48

0

try changing this line:

var text2 = document.getElementById("theName").innerHTML;

to this

var text2 = document.getElementById("theName").value;

answered May 16 '18 at 02:48

Matt Pengelly

1,480
2
20
34

score 0 · Answer 4 · answered May 16 '18 at 05:10

Your issue is due to this line var text2 = document.getElementById("theName").innerHTML;

You can have the desired outcome by modifying the above line to

var text2 = document.getElementById("theName").value;

What is the difference? innerHTML reads the content between html tags. For empty elements in HTML, there is no closing tag and hence, no content between tags. input is an empty-element in HTML and hence, you need to read its value.

Issue with reading and writing a name

4 Answers4