javascript - 为什么我收到 [object HTML ParagraphElement] Returned 而不是我的电话号码

Question

我有一个愚蠢的 fiddle ，我被困住了，我试图在每次按下 x2 按钮时将起始数字加倍。我没有返回这种行为，而是返回 [object HTML ParagraphElement] 。我正在重新学习 JavaScript，所以我尝试只使用 JavaScript，不使用框架等...

var inputVal = document.getElementById("input").value;
var inputEl = document.getElementById("input");
var doubleButton = function () {
  var sum = 0;
  Number(input);
  sum = input + input;
  inputEl.value = input;
  inputEl.innerText = input;
}
var boom = function () {
  alert("BOOM!!!!! Dont you know you should never press the big red  button")
}
document.getElementById("btnAdd").addEventListener("click", doubleButton, false);
document.getElementById("btnRed").addEventListener("click", boom, false);

<p>Enter a number and click the x2 button to have it doubled</p>
<p id="input">5</p>
<br>
<button id="btnAdd">x2</button>
<br>
<button class="redBtn" id="btnRed">BIG RED BUTTON</button>

这是我实际 fiddle 的链接 http://jsfiddle.net/jpb4815/uynfc1ky/16/

为什么我的代码返回对象而不是数字，我认为我已经通过将输入从字符串转换为数字来使用数字函数解决了这个问题。我在fiddler中尝试了各种不同的设置，即onload，body中没有换行。我已经多次更改代码。我可以用 jQuery 来做，但我真的想要简单的普通 JavaScript。

Answer 1

首先，您的input变量尚未实例化。我很惊讶它通过了审核。 Here's a bit on that.

那么，从哪里获取初始值呢？由于 p 标记没有 value 属性，因此我将 p 标记 id 作为 input，检索 innerHTML 属性，并通过 parseInt 运行结果。

此外，将 document.getElementById 拉入您的函数中，以便按钮在每次调用时都能获得所需的内容。

最后，sum 被求和但未分配给您的输出。

JSFiddle

(function () {
    var doubleButton = function () {
        var inputEl = document.getElementById("input");
        var inputVal = inputEl.innerHTML;
        var input = parseInt(inputVal, 10);
        var sum = input + input;
        inputEl.innerText = sum;

    }
    var boom = function () {
        alert("BOOM!!!!! Dont you know you should never press the big red button")
    }
    document.getElementById("btnAdd").addEventListener("click", doubleButton, false);
    document.getElementById("btnRed").addEventListener("click", boom, false);
}());