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并且我把x而不是1000时，它工作正常。

我希望你们能理解我的问题，如果你有任何问题我会很乐意回答他们！

Answer 1

你在这里有一个数据类型的问题。超时功能需要数字数据类型（例如3000），默认情况下，您的变量是一个字符串（“3000” - 注意引号）。

您可以使用Number()函数将字符串转换为数字，如下所示：

nameField = Number(nameField);

但是有一个更简单的解决方案：您可以将输入类型从“文本”更改为“数字”，这将验证数字输入并默认将值注册为数字数据类型。 MDN: HTML number input

有关数据类型的更多信息：MDN Javascript data types