javascript - 结果取回 [object HTMLInputElement]

Question

JS代码

'use strict';

$(document).ready(function() {
});

function change() {
    document.getElementById('the-name').innerHTML = document.getElementById('name');
}

HTML代码

<p> What's your name? <input type="text" placeholder="Name" id = "name"></input></p>

<button id="button" onclick= "change(document.getElementById('name'))"> Answer </button>

<p>Hello <span id = "the-name"></span>,</p>

使用上面的代码，每当我尝试通过单击按钮运行它时，我都会在标题中得到结果。有人可以通过告诉我我做错了什么来指出我正确的方向吗？非常感谢，谢谢!

Answer 1

您的问题是您将 HTMLInputElement 分配给元素的 innerHTML 而不是 text 或 HTML 内容 在行中:

document.getElementById('the-name').innerHTML = document.getElementById('name');

需要获取输入值:

document.getElementById('the-name').innerHTML = document.getElementById('name').value;

演示:

'use strict';

$(document).ready(function() {});

function change() {
  document.getElementById('the-name').innerHTML = document.getElementById('name').value;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> What's your name? <input type="text" placeholder="Name" id="name"></input>
</p>

<button id="button" onclick="change(document.getElementById('name'))"> Answer </button>

<p>Hello <span id="the-name"></span>,</p>