2017-10-27 5 views
-2

私はJavaScriptのforループで奇数を取得しようとしていますが、私はユーザー入力でループを終了したいと思います。私はどのようにユーザー入力(JavaScript)でループを終了することができます

iが "×< 7" あなたが欲しいものを私たちに語ったことを、この "X <入力"

<html> 

<head> 

<body> 

<input id="numbers" type="number"> 
<button onclick="odd()">Odd Numbers</button> 
<p id="demo"></p> 
<script> 
function odd() { 
var text = " "; 
var x; 
for (x = 1; x < 7; x+= 2) { 
    text += x + " "; 
} 
document.getElementById("demo").innerHTML =+ text; 
} 
</script> 

</body> 

</head> 

</html> 
+0

は私たちに、独自の実装コードを示しています。 – Talal

+0

こんにちは、[よくある質問](https://stackoverflow.com/help/how-to-ask)をご覧になり、[最小完全な例](https:///stackoverflow.com/help/mcve)あなたがこれまでに試みたことの –

答えて

0

UPDATE今

になりたい、ここに私の更新されたコードです基本的には、制限を設定してdivの変更に応じて変更します。

<html> 
 

 
<head> 
 

 
<body> 
 

 
<input id="numbers" type="number" onChange="change()"> 
 
<button onclick="odd()">Odd Numbers</button> 
 
<p id="demo"></p> 
 
<script> 
 
var lim=7; 
 
function change() { 
 
    lim = document.getElementById("numbers").value; 
 
} 
 
function odd() { 
 
var text = " "; 
 
var x; 
 
for (x = 1; x < lim; x+=2) { 
 
    text += x + " "; 
 
} 
 
document.getElementById("demo").innerHTML += text; 
 
} 
 
</script> 
 

 
</body> 
 

 
</head> 
 

 
</html>

旧コード

あなたがこれを達成するためにsetIntervalclearIntervalを使用することができます。

var i = 1; 
 
var myInt = setInterval(function(){ 
 
document.getElementById("div").innerHTML += i; 
 
i+=2; 
 
}, 100);
<button onClick="clearInterval(myInt)">STOP</button> 
 
<div id="div"></div>

0

を、私は、これはあなたがしようとしている、これは、ユーザーの入力に見えるものだと思うし、開始イテレータよりも大きければループします。

const button = document.querySelector('.go'); 
 

 
button.addEventListener('click', e => { 
 
    const input = document.getElementById('numbers'); 
 
    const output = document.getElementById('demo'); 
 
    
 
    if (input.value == 0) { return; } 
 
    
 
    for (let i = 0, len = input.value; i <= len; i++) { 
 
    if (i % 2 === 1) { 
 
     output.textContent += i.toString(); 
 
    } 
 
    } 
 
});
<html> 
 

 
<head> 
 

 
<body> 
 

 
<input id="numbers" type="number"> 
 
<button class='go'>Odd Numbers</button> 
 
<p id="demo"></p> 
 

 

 
</body> 
 

 
</head> 
 

 
</html>

関連する問題