在用户输入时打印循环

我在显示我的页面上的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>

来源

2017-02-20 Leopold Stoich

FYI：'<！DOCTYPE HMTL>'必须是：'<！DOCTYPE HTML>'和你没有开口''标签。这不是你的代码无法正常工作的原因，但它会使你的HTML无效。 –

我注意到标签，并没有意识到错误的“HTML”欣赏头@Scott Marcus –

您试图获取用户输入值的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>

来源

2017-02-20 22:06:05

就是这样。但是，为了完整性，我明确地做了这个，因为这个用户似乎对JavaScript很新颖。 –

同意这样更安全！ –

应该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 + " "; 
    } 
}

来源

2017-02-20 22:05:02

'num'甚至不需要。 –

@ScottMarcus我明白他希望总结一下，直到给出的数字，所以'num'是必要的！ –

啊，起初我并不清楚。好决定。 –

不知道你是想什么，但如果你想重复的循环，直到用户输入的输入，你可以做如下

检查这个片段

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>

希望它可以帮助

来源

2017-02-20 22:05:19 Geeky

问题在于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>

来源

2017-02-20 22:09:14 bognix

请不要链接到外部网站的解决方案，除非有理由说明代码无法在这里工作。即使你发布到外部网站，你也应该在这里发布代码，以防万一以后外部链接失效，你的答案就不会。 –

感谢您的修复！我会记住未来！ – bognix

在用户输入时打印循环

回答

相关问题