Question

我有一个愚蠢的小提琴，我坚持，我试图采取开始数字，并在每次按下x2按钮时加倍。而不是这种行为，而是返回[对象HTML ParagraphElement]。我正在重新学习JavaScript，所以我尝试使用JavaScript，没有框架等......

＆＃13;

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);

＆＃13;

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

＆＃13;

这是指向我的实际小提琴http://jsfiddle.net/jpb4815/uynfc1ky/16/

的链接

为什么我的代码返回对象而不是数字，我认为我通过将输入从字符串转换为数字来处理数字函数。我在fiddler中尝试了各种不同的设置onload，没有包裹在体内。我已经多次更改了代码。我可以在jQuery中做到这一点，但我真的只想要普通的JavaScript。

Answer 1

试试这个：

(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);

        }());

Answer 2

首先，您的input变量未实例化。通过集合我感到很惊讶。 Here's a bit on that.

那么，从哪里获得初始值？由于p代码没有value属性，因此我将p代码标记为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);
}());

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

2 个答案: