Question

Javascript - 我有这段代码：

<form id="form">A: <input id="k" name="k" step=".1" type="number" value="20" width="5" /></form>

<button onclick = "calc()"> calculate </button>

<script>
function calc() {
var k = document.getElementById("k");
document.getElementById("b").innerHTML = k;
}
</script>
<p id="b"></p>

按下calculate按钮时收到以下消息：

[object HTMLInputElement]

为什么这不会打印我的变量k，而底部的HTML是？

Answer 1

您需要元素的.value属性，而不是元素本身。

var k = document.getElementById("k").value;

Answer 2

因为k是HTMLInputElement，并且HTMLInputElements的toString返回"[object HTMLInputElement]"。如果您想获取该元素value，请使用其value属性：

var k = document.getElementById("k").value;

Answer 3

您需要访问该值。现在您正在访问整个Dom元素。你需要打电话给k.value

Answer 4

该函数名为getElementById()，这意味着它将返回一个元素。

<input/>元素具有.value属性，其中包含input元素的值，因此以下是您的代码：

<form id="form">A:
    <input id="k" name="k" step=".1" type="number" value="20" width="5" />
</form>

<button onclick="calc()"> calculate </button>

<script>
    function calc() {
        var k = document.getElementById("k");
        document.getElementById("b").innerHTML = k.value;
    }
</script>
<p id="b"></p>

此外，建议使用JavaScript定义事件函数，以便从js中正确地分离html。您可以使用Element.addEventListener()函数执行此操作，现在这是您的代码：

<form id="form">A:
    <input id="k" name="k" step=".1" type="number" value="20" width="5" />
</form>

<button id="calcButton"> calculate </button>

<script>
    window.addEventListener("load", function() {
        var btn = document.getElementById("calcButton");
        btn.addEventListener("click", calc);
    });

    function calc() {
        var k = document.getElementById("k");
        document.getElementById("b").innerHTML = k.value;
    }
</script>
<p id="b"></p>

希望这有帮助！

innerHTML不会打印变量

4 个答案: