JavaScript input/output

Question

JavaScript code is not reading my input in which is a name and should have output saying Maurice is a very nice name. I think their is a grammatical error that I am missing in my divOutput.

The program should take name input and output "Maurice is a very nice name"

//text box
function sayHi() {
  var txtName = document.getElementById("txtName");
  var divOutput = document.getElementById("divOutput");
  var name = txtName.value;
  divOutput.innerHTML = "<em>" + name + "</em>";
  divOutput.innerHTML = "is a very nice name.";
}
//end HI

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>Inner.html</title>
  <link rel="stylesheet" type="text/css" href="textBoxes.css" />
</head>

<body>
  <h1>Inner HTML </h1>
  <form action="">
    <fieldset>
      <label>Pleae type your name</label>
      <input type="text" id="txtName" />
      <button type="button" onclick="sayHi()">
         Click Me
        </button>
    </fieldset>
  </form>
  <div id="divOutput">
    Watch this space.
  </div>
</body>

</html>

divOutput.innerHTML will replace everything whatever present. — random
– random, Commented Jul 18, 2019 at 12:13
Either compose the full string before setting it as innerHTML or add it the second time, i.e. replace = with +=. — user5734311
– user5734311, Commented Jul 18, 2019 at 12:15

random · Accepted Answer · 2019-07-18 12:14:53Z

1

divOutput.innerHTML will replace whatever the divOutput have earlier, instead use +=.

function sayHi() {
  var txtName = document.getElementById("txtName");
  var divOutput = document.getElementById("divOutput");
  var name = txtName.value;
  divOutput.innerHTML += "<em>" + name + "</em>";
  divOutput.innerHTML += " is a very nice name.";
}

<form action="">
  <fieldset>
    <label>Pleae type your name</label>
    <input type="text" id="txtName" />
    <button type="button" onclick="sayHi()">
                     Click Me
                    </button>
  </fieldset>
</form>
<div id="divOutput">
  Watch this space.
</div>
</body>

answered Jul 18, 2019 at 12:14

random

7,9093 gold badges21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ni3solanki · Accepted Answer · 2019-07-18 12:15:13Z

0

function sayHi()
 {
 var txtName = document.getElementById("txtName") ;
 var divOutput = document.getElementById("divOutput") ;
 var name = txtName.value;
 divOutput.innerHTML = "<em>" + name + "</em> ";
 divOutput.innerHTML += "is a very nice name."; 
}

or

function sayHi()
 {
 var txtName = document.getElementById("txtName") ;
 var divOutput = document.getElementById("divOutput") ;
 var name = txtName.value;
 divOutput.innerHTML = "<em>" + name + "</em> is a very nice name."; 
}

answered Jul 18, 2019 at 12:15

ni3solanki

5223 silver badges12 bronze badges

Comments

Parth Patel · Accepted Answer · 2019-07-18 12:15:24Z

0

Try this, you are overwriting html. Try this

function sayHi() {
        var txtName = document.getElementById("txtName");
        var divOutput = document.getElementById("divOutput");
        var name = txtName.value;
        divOutput.innerHTML = "<em>" + name + "</em> is a very nice name.";
        // divOutput.innerHTML = "is a very nice name.";
    }

answered Jul 18, 2019 at 12:15

Parth Patel

8441 gold badge9 silver badges15 bronze badges

Comments

Kim · Accepted Answer · 2019-07-18 12:51:46Z

Take a look at this code block where I modified your attempt just a tad.

In brief, you were almost there!

Note that in order to get the value of the element, you can use .value on what was retrieved from getElementById.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Inner.html</title>
    <link rel="stylesheet" type="text/css" href="textBoxes.css" />
  </head>
  <body>
    <h1>Inner HTML</h1>
    <form>
      <fieldset>
        <label>Please type your name</label>
        <input type="text" id="txtName" />
        <button type="button" onclick="sayHi()">
          Click Me
        </button>
      </fieldset>
    </form>
    <div id="divOutput">
      Watch this space.
    </div>
    <script type="text/javascript">
      //text box
      function sayHi() {
        var txtName = document.getElementById("txtName");
        console.log(txtName.value); // <== use dot value to get the value.
        var divOutput = document.getElementById("divOutput");
        divOutput.innerHTML =
          "<em>" + txtName.value + "</em> is a very nice name.";
      }
      //end HI
    </script>
  </body>
</html>

Collectives™ on Stack Overflow

JavaScript input/output

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related