为什么我得到的是返回的[object HTML ParagraphElement]而不是我的号码

Why am I getting [object HTML ParagraphElement] Returned instead of my number

本文关键字：ParagraphElement 号码 HTML 我的返回为什么 object 更新时间：2023-09-26

我有一把愚蠢的小提琴，每次按下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>

这是我真正小提琴的链接http://jsfiddle.net/jpb4815/uynfc1ky/16/

为什么我的代码返回的是对象而不是数字，我认为我已经通过数字函数将输入从字符串转换为数字来解决了这个问题。我在fiddler中尝试了各种不同的设置——加载，无需包裹。我已经多次更改代码。我可以在jQuery中完成，但我真的只想要普通的JavaScript。

首先，input变量没有实例化。我很惊讶能通过考试。这里有一些。

那么，从哪里获得初始值呢？由于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);
}());

试试这个：

(function () {
            var inputEl = document.getElementById("input");
            var doubleButton = function () {
                var sum = 0;
                input = Number(inputEl.textContent);
                sum = input + input;
                inputEl.textContent = 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);
        }());

没有找到相关文章