為什么返回[object HTML ParagraphElement]而不是我的電話號碼

Question

我遇到了一個愚蠢的小提琴，我想取一個起始數字，並在每次按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/

為什么我的代碼返回的是對象而不是數字，所以我認為通過使用數字函數將輸入從字符串轉換為數字，可以解決這個問題。 我已經嘗試了在提琴手加載時進行各種不同的設置，但沒有包裹任何內容。 我已經多次更改了代碼。 我可以在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變量未實例化。 令我驚訝的是，傳來了鼓舞。 這有一點。

那么，從哪里獲得初始值呢？ 由於p標簽不具有value的財產，我拉p id'd作為標簽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);
}());