How to send information from HTML <input> element to <span> using JavaScript .innerHTML?

Question

I'm very new to JavaScript and trying to mimic an example in a book I'm reading. I would like to take what is input to a HTML element and send the data to a element using .innerHTML. I don't know what is wrong.

<!DOCTYPE html>
<html>
<head>
 <title>JS Form</title>
</head>
<body>
   <form id="date">
     <table>
      <tr><td><input type="text" name="user" placeholder="Please input name"    onchange="greeting();"></td>
      </tr>
      <tr><td><span id="hello"></span></td>
      </tr> 
     </table>
   </form>
<script type="text/javascript">
   function greeting() {
     var user = document.date.user.value;
     var hello = document.getElementById("hello");
     hello.innerHTML = "How are you " + user;
   }
</script>
</body>
</html>

Harry · Accepted Answer · 2013-08-18 04:10:15Z

1

Add name="date" to your form tag like below. Else document.date.user.value will not work.

<form id="date" name="date">

Another way to get around the issue, is accessing the date property of the window object.

window.date.user.value;

This is possible because you've set an id on the form.

Or you might consider accessing the form using its id and then get user value as follows:

var user = document.getElementById("date").user.value;

edited Aug 18, 2013 at 4:10

answered Aug 18, 2013 at 4:04

Harry

90.1k26 gold badges216 silver badges224 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:15:45Z

1

For simplification, and depending on your browser, you could use document.querySelector. Take a look at this very helpful SO post: JavaScript: how to get value of text input field?

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Aug 18, 2013 at 4:06

DevlshOne

8,4671 gold badge31 silver badges38 bronze badges

1 Comment

DevlshOne Over a year ago

It's one of my favorite posts here on SO. Certainly better than any W3 tutorial. ;)

Super Hornet · Accepted Answer · 2013-08-18 04:11:41Z

0

you should do this first:

var user= document.getElementsByName("user");
var hello = document.getElementById("hello");
 hello.innerHTML = "How are you " + user[0].value;

answered Aug 18, 2013 at 4:11

Super Hornet

2,9275 gold badges31 silver badges58 bronze badges

Collectives™ on Stack Overflow

How to send information from HTML <input> element to <span> using JavaScript .innerHTML?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related