Having problem taking input and outputting it into an HTML file

Question

Trying to write a JS/HTML program that takes the user's name as an input and outputs "Hello, [Name]!" when you click he button.

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Greeter</title>
</head>

<body>
    <script src="app.js"></script>

    <input id = "txtName" placeholder="Your Name"/>
    <button onclick="sayHello()"> Say Hello </button>
</body>
</html>

JS:

let txtName = document.querySelector('#txtName');
//let name = "lauren";

function sayHello() {
    document.write("Hello, " + txtName + "!");
}

When I try to run it, it outputs "Hello, null!" everytime.

You're running your script before the elements it targets have been created. Try moving it to the end of the document, before the closing body tag. Also, you need to get the `value` of the input, so `txtName.value` not `txtName` — j08691, Jan 26 '19 at 20:26
function sayHello() { document.write("Hello, " + txtName.value + "!"); } — Shantanu Terang, Jan 26 '19 at 20:27

score 0 · Answer 1 · answered Jan 26 '19 at 20:27

0

Move it to the function itself and add "value":

function sayHello() {
  let txtName = document.querySelector('#txtName').value;
  document.write("Hello, " + txtName + "!");
}

answered Jan 26 '19 at 20:27

A. Meshu

4,053
2
20
34

Word Rearranger · Answer 2 · 2019-01-26T20:48:01.580

Your function does not have access the the txtName variable. You should move it inside the function. You can also use getElementById instead of a query selector. Since were there, why not remove the variable entirely:

      function sayHello() {
   document.write("Hello, " + document.getElementById('txtName').value + "!");
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Greeter</title>
</head>

<body>
    <script src="app.js"></script>

    <input id = "txtName" placeholder="Your Name"/>
    <button onclick="sayHello()"> Say Hello </button>
</body>
</html>

score 0 · Answer 3 · answered Jan 26 '19 at 21:09

Your code had 2 problems with it. One is scope and the other is value.

let txtName

As the variable is initiated using let, its scope is limited and not global. Use var to make it global, so it can get access inside functions too.

 let txtName = document.querySelector('#txtName');

This line of code is running as soon as the page loads. So it is assigned the input object as the page gets loaded (and not the value). For printing the name, although we need the value of this object, (which is the second point) and not the whole object itself. We access its value by using .value.

 var txtName = document.querySelector('#txtName').value;

Define this line inside the called function else it will get null value, because it will run as soon as the page loads and null value will be assigned because no input is there inside the input box.

function sayHello() {
var txtName = document.querySelector('#txtName').value;
    document.write("Hello, " + txtName + "!");
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Greeter</title>
</head>

<body>
    <script src="app.js"></script>

    <input id = "txtName" placeholder="Your Name"/>
    <button onclick="sayHello()"> Say Hello </button>
</body>
</html>

Having problem taking input and outputting it into an HTML file

3 Answers3