innerHTML不会打印变量

时间:2015-01-23 02:49:32

标签: javascript

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是?

4 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:2)

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

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

答案 2 :(得分:1)

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

答案 3 :(得分:1)

该函数名为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>

希望这有帮助!