如何从JavaScript函数中的HTML输入读取文本？

Question

On the webpage, the user is able to write text in a text field. I would like to use the button on this page to read this text and then place it somewhere else. Here is the simplified markup so far:

<div id="Demo1" class="w3-accordion-content w3-container">
<h4>Let's make your Resume Header</h4>
<table>
  <tr>
    <th>Name</th>
    <td><input type="text" id="name"></td>
  </tr>
</table>
<button onclick="header()" class="save">SAVE</button>
</div>

And here is the JavaScript code that I have:

function header() {
  var name = document.getElementById(name).value;
  alert(name);
}

This alert does not work at all when I run it. I cannot figure out why, any help is much appreciated.

Answer 1

You must wrap the elementById argument in quotes, as well as have a way for your HTML to reference your JavaScript. See Below.

<script>
function header() {
  var name = document.getElementById("name").value;
  alert(name);
}
</script>

<div id="Demo1" class="w3-accordion-content w3-container">
<h4>Let's make your Resume Header</h4>
<table>
  <tr>
    <th>Name</th>
    <td><input type="text" id="name"></td>
  </tr>
</table>
<button onclick="header()" class="save">SAVE</button>
</div>

Answer 2

You have missed quotes. So use document.getElementById('name').value instead of document.getElementById(name).value .

if you use name as a parameter then you can use it without quotes.

 function header() { var name = document.getElementById('name').value; alert(name); } 

 <div id="Demo1" class="w3-accordion-content w3-container"> <h4>Let's make your Resume Header</h4> <table> <tr> <th>Name</th> <td> <input type="text" id="name"> </td> </tr> </table> <button onclick="header()" class="save">SAVE</button> </div>