javascript - 结果返回[object HTMLInputElement]

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>

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

最佳答案

您的问题是您正在为元素的HTMLInputElement分配innerHTML而不是该行中的text或HTML content：

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>

关于javascript - 结果返回[object HTMLInputElement]，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47547922/