CODEWITHSUNDEEP
javascripthtml
Maurice Phillips
Maurice Phillips

Reputation: 1

JavaScript input/output

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>

Upvotes: 0

Views: 743

Answers (4)

Kim
Kim

Reputation: 956

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>

Upvotes: 0

Parth Patel
Parth Patel

Reputation: 824

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.";
    }

Upvotes: 0

ni3solanki
ni3solanki

Reputation: 522

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."; 
}

Upvotes: 0

random
random

Reputation: 7891

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>

Upvotes: 1

Related Questions