2017-02-20 227 views
0

我在顯示我的頁面上的for循環時遇到問題。有一個按鈕,點擊提示用戶輸入一個數字,然後通過for循環顯示所述數字的迭代。我查看了在此提出的類似問題,但似乎仍然遇到問題。在用戶輸入時打印循環

<!doctype hmtl> 
<html> 
<head></head> 

<button onclick="getNumber()">Click!</button> 
<p id="demo"></p> 

<script> 
function getNumber() { 
    var i; 
    var num; 
    var n = prompt("Please enter a number"); 
    for(i = 0; i < n.length; i++){ 
     num += n[i]; 

     document.getElementById("demo").innerHTML += num + " "; 
    } 
} 
</script> 
</body> 
</html> 
+0

FYI:'<!DOCTYPE HMTL>'必須是:'<!DOCTYPE HTML>'和你沒有開口''標籤。這不是你的代碼無法正常工作的原因,但它會使你的HTML無效。 –

+0

我注意到標籤,並沒有意識到錯誤的「HTML」欣賞頭@Scott Marcus –

回答

1

您試圖獲取用戶輸入值的length屬性而不是直接值。

此外,在您的代碼中有幾個不必要的位和幾個對性能有不利影響的不良做法。

// Get a reference to the HTML (DOM - Document Object Model) elements that 
 
// you will need access to at this level of scope 
 
var btn = document.getElementById("btn"); 
 

 
// Don't set up event handling code in the HTML (a.k.a. inline event handling) as it 
 
// makes the HTML harder to read (two languages on a single line), it doesn't follow 
 
// the standard for event handling, and it causes anonymous Global JavaScript functions 
 
// to be made as wrappers around the HTML attribute values. Instead, do it in JavaScript 
 
// like this: 
 
btn.addEventListener("click", getNumber); 
 

 
function getNumber() { 
 
    // Just scan for the element once, not each time the loop iterates 
 
    var el = document.getElementById("demo"); 
 

 
    // Get the user's input and convert it to a number 
 
    var n = parseInt(prompt("Please enter a number"), 10); 
 
    
 
    // Set up a string that will become the output. 
 
    var output = ""; 
 
    
 
    for(var i = 0; i < n; i++){ 
 
    // NEVER alter an HTML (DOM) element within a loop as performance suffers 
 
    // because the browser must recreate the entire DOM structure. 
 
    // Instead, set up a variable that holds the results 
 
    output += " " + i; 
 
    } 
 

 
    // Once loop is done, update element with the variable. But, this way, 
 
    // you are doing it just once, instead of each time the loop iterates. 
 
    // Also, if the new content does not include HTML, then use textContent 
 
    // instead of innerHTML as it lets the browser know that the data does 
 
    // not have to be parsed, which results in a quicker update. 
 
    el.textContent = output; 
 
}
<button id="btn">Click!</button> 
 
<p id="demo"></p>

+0

'

+0

就是這樣。但是,爲了完整性,我明確地做了這個,因爲這個用戶似乎對JavaScript很新穎。 –

+0

同意這樣更安全! –

1

應該i < n沒有i < n.length。因爲你正在做的循環次數與變量n(這是一個字符串)中的字符數量相同。因此,如果用戶鍵入9,則只打印一個數字,因爲"9".length爲1,並且0和1之間只有一個迭代(排除)。試試這個:

function getNumber() { 
    var num = 0; // this should be initialized 
    var n = prompt("Please enter a number"); 
    for(var i = 0; i < n; i++){ 
     num += i; // add i 
     document.getElementById("demo").innerHTML += num + " "; 
    } 
} 
+0

'num'甚至不需要。 –

+0

@ScottMarcus我明白他希望總結一下,直到給出的數字,所以'num'是必要的! –

+0

啊,起初我並不清楚。好決定。 –

1

不知道你是想什麼,但如果你想重複的循環,直到用戶輸入的輸入,你可以做如下

檢查這個片段

function getNumber() { 
 
    var i; 
 
    var num; 
 
    var n = prompt("Please enter a number"); 
 

 
    for (i = 0; i < n; i++) { 
 
    document.getElementById("demo").innerHTML += i + " "; 
 
    } 
 

 

 

 
}
<button onclick="getNumber()">Click!</button> 
 

 
<p id="demo"></p>

希望它可以幫助

1

問題在於n.length一部分。假設用戶提供數字「10」。編號10的長度屬性爲2,因此循環內的代碼被執行2次而不是10次。

<html> 
 
<head> 
 
</head> 
 

 
<button onclick="getNumber()">Click!</button> 
 

 
<p id="demo"></p> 
 

 
<script> 
 
function getNumber() { 
 
    var i; 
 
    var num; 
 
    var n = parseInt(prompt("Please enter a number")); 
 
    for(i = 1; i <= n; i++){ 
 
     document.getElementById("demo").innerHTML += " " + i; 
 

 

 
    } 
 

 

 

 
} 
 

 
</script> 
 

 
</body> 
 
</html>

+0

請不要鏈接到外部網站的解決方案,除非有理由說明代碼無法在這裏工作。即使你發佈到外部網站,你也應該在這裏發佈代碼,以防萬一以後外部鏈接失效,你的答案就不會。 –

+0

感謝您的修復!我會記住未來! – bognix