setTimeoutのカスタムユーザー入力

Question

初心者がJavascriptを学習しています。私はいくつかの助けが必要です... 私はゲームを作ろうとしており、ユーザーは自分の時間を設定できます。

私のコードは次のようである：

HTML：

<div class='wrapper'> 
<form id='nameForm'> 
    <div class='form-uname'> 
     <lable id='nameLable' for='nameField'>Create a username:</lable> 
     <input id='nameField' type='text' maxlength='25'></input> 
    </div> 
    <div class='form-sub'> 
     <button id='subButton' type='button'>Print your name!</button> 
    </div> 
</form> 

<div> 

はJavaScript：

function getUserName() { 
var nameField = document.getElementById('nameField').value; 

    alert(nameField); 
} 
var subButton = document.getElementById('subButton'); 
subButton.addEventListener('click', getUserName, false); 

警報値は正しいです！しかし、変数nameFieldを1000（最後の行を参照）の代わりに以下のコードに入れても、動作しません！

var Timer = window.setTimeout; 
$shape.onclick = function(){ 
    window.clearTimeout(Timer); 
    Timer = window.setTimeout(function(){ 
     $gameOverp.innerHTML = "You run out of time :(<br /> GAME OVER!"; 
     passedTime(); 
     $gameOver.style.display = "block"; 
     $shape.style.display = "none"; 
     $gameInfop.innerHTML = "TRY AGAIN!"; 
     $gameInfop.style.marginLeft = "280px"; 
}, 1000); 

私は関数内nameFieldを作ることを知っているが、私は私のファイルの先頭にそれを作る場合でも、それは動作しません。

x = 3000を使用し、1000の代わりにxを入力すると、正常に動作します。

私はあなたに私の問題を理解していただきたいと思います。ご不明な点がございましたら、お返事ください。

Answer 1

ここにはデータ型に関する問題があります。タイムアウト関数は数値データ型（たとえば3000）を必要とし、変数はデフォルトで文字列（ "3000" - 引用符に注意してください）です。

あなたがそうのように、​​機能を使用して文字列を数値に変換することができます：

nameField = Number(nameField);

簡単に解決策はしかし、あります：あなたは「数」に「テキスト」からの入力タイプを変更することができますこれは数値入力を検証し、デフォルトで番号データ型として値を登録します。データ型のMDN: HTML number input

さらに詳しい情報：MDN Javascript data types