如果高于分配的变量 javascript，则删除用户输入

Question

我是一名正在学习 HTML/CSS/Javascript 的新程序员，一直在摆弄它，直到遇到一个错误。我让计算机猜测我的数字 (0-5)，但后来意识到如果我输入大于 5 的数字，网站就会崩溃。有什么办法可以做到，如果用户输入的数字大于 5，它会自动删除它吗？或者不是 Javascript。提前致谢:)

document.getElementById("guess").onclick=function() {

    var gotit=false;
    var guesses=1;
    var x;

    while(gotit==false) {

        x=Math.random();
        x=6*x;
        x=Math.floor(x);

        if(document.getElementById("myNumber").value==x) {
            gotit=true;
        } else {
            guesses++;
        }
    }

    alert("Got it! It was a " + x + ". It only took me " + guesses + " guesses!");

}

Answer 1

然后定义一个 onchange 函数来检查长度：

document.getElementById("myNumber").onchange  = function (ev){
  try{ 
        var target = document.getElementById("myNumber");
        if(parseInt(target.value) > x) { // can throw exception, when given a non number
          target.value="";
        }
    } catch(ex) {
      alert('Not a number');
    }
};

重要:

你这里有一个更大的问题：你正在生成一个随机数，然后将它与输入（不会改变）进行比较。这是一个无限循环。因为这是一个随机操作，你可以多次点击相同的数字。

您需要先生成您的号码（在 'guess' 按钮上点击事件之前），然后再点击询问按钮。像这样：

var luckyNumber = x;
var guesses=1;

document.getElementById("start").onclick=function(){ //init counters once
    guesses=0;
    x=Math.floor(Math.random()*6);
    gotit = false;
 }


document.getElementById("guess").onclick=function() { // guess as many times as you want
    if(document.getElementById("myNumber").value==x) {
      gotit=true;
    } 
    guesses++;
    if(gotit){
     alert("Got it! It was a " + x + ". It only took me " + guesses + " guesses!");
    }
}

但是如果你想让电脑猜你的号码，那么你需要限制猜测的次数（添加一个计数器），否则它最终会挂起。

Answer 2

试试这个：

 document.getElementById("guess").onclick=function() {      
        if(document.getElementById("myNumber").value > 5) {
            document.getElementById("myNumber").value = "";
            alert("Please provide a number that is with in 0 to 5");
        } else {
            var gotit=false;
            var guesses=1;
            var x;

            while(gotit==false) {

                x=Math.random();
                x=6*x;
                x=Math.floor(x);

                if(document.getElementById("myNumber").value==x) {
                    gotit=true;
                } else {
                    guesses++;
                }
            }

            alert("Got it! It was a " + x + ". It only took me " + guesses + " guesses!");
    }

Answer 3

我把这当成一个小挑战，然后继续重做你的小游戏。希望这有帮助。

Demo here

(function (guess, tryy, message) {
    var comp = function () {
        return Math.floor(Math.random() * 6)
    };
    var number = comp();
    var count = 0;
    var test = function () {
        var val = guess.value;
        if (!Number.isNaN(val) && val >= 0 && val <= 5) {
            switch (true) {
                case val > number:
                    message.innerHTML = 'Your guess was too high!';
                    count++;
                    break;
                case val < number:
                    message.innerHTML = 'Your guess was too low!';
                    count++;
                    break;
                case val == number:
                    count++;
                    message.innerHTML = 'Congratulations you found the number! It took you ' + count + ' guesses';
                    //Reseting game here
                    setTimeout(function(){
                        count = 0;
                        number = comp();
                        guess.value = '';
                        message.innerHTML = 'Your game has been reset';
                    }, 2000);
                    break;
            };
        }

    };
    tryy.onclick = test;
    guess.onkeyup = function (e) {
        if (e.keyCode == 13) {
            test();
        }
    }
})(document.getElementById('guess'), document.getElementById('tryy'), document.getElementById('message'));

如果高于分配的变量 javascript，则删除用户输入

Delete user input if higher than assigned variable javascript

html

javascript

input

button