Question

我试过这个简单的练习，我确实让它工作但不正确。当您单击按钮时，它应该为您提供0到1000之间的随机数。当您再次单击该按钮时，它会创建另一个随机数，如果它大于最后一个，则显示它。如果不是，它什么都不做。虽然它这样做，但它会计算它运行该函数的次数。我制作的那个确实给了我随机数字，但有时候，它显示的数字比最后一个数字少，有时却没有。我无法弄清楚为什么。我怀疑这可能是因为我试图改变按钮的代码行。

<!DOCTYPE html>
<html>
<head>
<input id="btn" type="button" onclick="initiate(1)" value="Click me!"><br>
<script>
function geid(id) {
    return document.getElementById(id);
}
var count = 0;

function initiate(n) {
    var x = n;
    n = Math.floor(Math.random() * 1000);
    document.getElementById("btn").onclick = function () {
        initiate(n);
    }

    if (n > x) {
        geid("fid").innerHTML = n;
        count += 1;
        geid("fid2").innerHTML = count + " times";

    } else {
        count += 1;
        geid("fid2").innerHTML = count + " times";

    }
}
</script>

</head>

<body>
Number : <div id="fid">0</div>
Tried <div id="fid2">0</div>

</body>

</html>

Answer 1

问题在于，无论新选择的onclick值是否大于之前的值（n），您始终都会更改x函数。

举个例子：假设语句Math.floor(Math.random()*1000);在你多次运行时产生这个值序列：100,500,200,300。

首次点击时，该功能被称为initiate(1)，点fid1设置为保留100，并且onclick处理程序设置为调用initiate(100)。

第二次点击时，该功能被称为initiate(100)，点fid1设置为保留500，并且onclick处理程序设置为调用initiate(500)。到目前为止一切都很好。

第三次点击时，该功能被称为initiate(500)，点fid1在500处保持不变，并且onclick处理程序设置为调用initiate(200)。嗯...

第四次点击时，该功能被称为initiate(200)，点fid1设置为保留300，并且onclick处理程序设置为调用initiate(300)。

所以问题是，如果你想改变处理程序以保持fid1中的当前值，那么除非n > x，否则你不应该更改处理程序。

Answer 2

这里似乎有几处错误。这种重新安排应该有效：

function geid(id){return document.getElementById(id);}
var count = 0;
    var x = 0;

function initiate(){
    n =  Math.floor(Math.random()*1000);

    if(n>x){
        x = n;
        geid("fid").innerHTML = n;
        count +=1;
        geid("fid2").innerHTML = count + " times";

    }else{
        count +=1;
        geid("fid2").innerHTML = count + " times";
    }
}

document.getElementById("btn").onclick = function(){
    initiate();
}

有足够的优化空间，但这应该非常清楚。

更新

这是一个我觉得比较干净的版本：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="btn" type="button" value="Click me!"><br>
<p>Number : <span id="number">0</span></p>
<p>Tried <span id="tried">0</span></p>
<script>
    function geid(id){return document.getElementById(id);}
    var count = 0, highest = 0, number = geid("number"), tried = geid("tried");

    geid("btn").onclick = function(){
        var random =  Math.floor(Math.random() * 1000);
        count += 1;
        tried.innerHTML = count + " times";

        if (random > highest){
            highest = random;
            number.innerHTML = random;
        }
    }
</script>
</body>
</html>

我仍然可能将整个事情包装在IIFE中，以便不在全局范围内公开任何内容，但除此之外，我相信这段代码现在具有合理的可读性和合理的效率。

Answer 3

这是一个干净的版本

<!DOCTYPE html>
<html>
  <head>
    <script>
      (function(){
        var count = 0, lastRandom = 0, click;
        click = function () {
          var random;
          random = Math.floor(Math.random()*1000);
          if (random > lastRandom) {
            document.getElementById("fid").innerHTML = random;
          }
          count += 1;
          document.getElementById("fid2").innerHTML = count+" times";
        };
        window.addEventListener('load',function(){
          document.getElementById('btn').addEventListener('click',click,false);
        },false);
      });
    </script>
  </head>
  <body>
    <input id="btn" type="button" value="Click me!"><br>
    Number : <div id="fid">0</div>
    Tried <div id="fid2">0</div>
  </body>
</html>

不要只是复制粘贴这个。如果它有效（我现在无法测试），那么试着去理解它在做什么。如果你不能那么请问，如果你需要，我可以添加一些评论

Answer 4

如果你真的很快点击按钮，这个改变就不会生效....

document.getElementById("btn").onclick = function(){ // right here
  initiate(n);                                       // so not a good idea.
}

Answer 5

就这样说：

document.getElementById("btn").onclick = function(){
    initiate(n);
}

在您的发起功能之外

像：

function geid(id){return document.getElementById(id);}
var count = 0;

function initiate(n){
    var x = n;
    n =  Math.floor(Math.random()*1000);


if(n>x){
    geid("fid").innerHTML = n;
    count +=1;
    geid("fid2").innerHTML = count + " times";

}else{
    count +=1;
    geid("fid2").innerHTML = count + " times";

}


}

window.onload = function() {



    document.getElementById("btn").onclick = function(){
      var n = 10; // some number    
      initiate(n);
    }
}

我不能让这几行简单的代码正常工作，也不知道为什么

5 个答案:

更新