如何使用`document.getElementByID（「results」）打印。innerHTML = results？

Question

當我點擊滾動按鈕時，沒有任何反應。有沒有辦法使用document.getElementByID("results").innerHTML來顯示結果，或者這是不推薦的？

HTML

<p>How many dice? 
    <br/> 
    <input type="text" id="numDice" /> 
</p> 
<p>How many sides per die? 
    <br/> 
    <input type="text" id="numSides" /> 
</p> 
<button onclick="diceRoll()" id="roll"/>Roll!</button> 
<p id="results"></p> 

的JavaScript

var numDice = document.getElementByID(numDice).innerHTML; 
var numSides = document.getElementByID(numSides).innerHTML; 

function diceRoll() { 
    var results = ""; 

    for (var i = 0; i < numDice; i++) { 
    results += (Math.random() * numSides) + 1; 
    } 

    document.getElementByID("results").innerHTML = results; 
} 

CodePen

Answer 1

錯字，它不是

getElementByID 

但

getElementById 

的情況下是非常重要的，而且傳遞的參數都是字符串，所以它們應該被引用

function diceRoll() { 
    var numDice = document.getElementById('numDice').value; 
    var numSides = document.getElementById('numSides').value; 
    var results = ""; 

    for (var i = 0; i < numDice; i++) { 
     results += (Math.round(results + (Math.random() * numSides) + 1)).toString(); 
    } 

    document.getElementById('results').innerHTML = results; 
} 

FIDDLE

Answer 2

要調用之前document.getElementByID(numDice).innerHTML的DOM是準備。該元素不存在，所以這會引發錯誤。

你想得到值每個時間diceRoll()被調用，以便你得到用戶輸入的值。 numDice將而不是當值更改時自動更新。

P.S.這是getElementById，你想用.value()爲<input> s。

function diceRoll() { 
    var results = ""; 
    var numDice = parseInt(document.getElementById('numDice').value, 10); 
    var numSides = parseInt(document.getElementById('numSides').value, 10); 

    for (var i = 0; i < numDice; i++) { 
    results += (Math.random() * numSides) + 1; 
    } 

    document.getElementById("results").innerHTML = results; 
}