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

Question

I tried to this simple exercise , i did get it to work but not correctly. 我尝试了这个简单的练习，但确实无法正常工作。 It's supposed to give you a random number between 0 and 1000 as you click a button. 单击按钮时，应该为您提供0到1000之间的随机数。 When you click the button again , it creates another random number , if its bigger than the last one , it displays it. 再次单击该按钮时，它将创建另一个随机数，如果它大于最后一个随机数，则会显示该随机数。 If it is not , it does nothing. 如果不是，则不执行任何操作。 And while it does this , it counts how many times it had run the function. 在执行此操作的同时，它会计算运行该功能的次数。 The one i made did give me random numbers but sometimes , it displayed smaller numbers than the last one and sometimes it didn't. 我制作的数字确实给了我随机数字，但有时，它显示的数字比上一个数字小，有时却没有。 I can't figure out why. 我不知道为什么。 I suspect it might be because of the line of code where i tried to change what the button does. 我怀疑这可能是因为我试图更改按钮的功能所在的代码行。

<!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

The problem is that you're always changing the onclick function, regardless of whether the newly chosen n value is greater than the previous value ( x ) or not. 问题是，无论新选择的n值是否大于先前的值（ x ），都始终在更改onclick函数。

Take this example: suppose that the statement Math.floor(Math.random()*1000); 举个例子：假设语句Math.floor(Math.random()*1000); produces this sequence of values when you run it multiple times: 100, 500, 200, 300. 当您多次运行它时，将生成此值序列：100、500、200、300。

With the first click, the function was called as initiate(1) , the spot fid1 was set to hold 100 , and the onclick handler was set to call initiate(100) . 第一次单击时，该函数称为initiate(1) ，现场fid1设置为保持100 ，而onclick处理程序设置为调用fid1 initiate(100) 。

With the second click, the function was called as initiate(100) , the spot fid1 was set to hold 500 , and the onclick handler was set to call initiate(500) . 第二次单击时，该函数称为initiate(100) ，现场fid1设置为容纳500 ，而onclick处理程序被设置为调用fid1 initiate(500) 。 So far so good. 到现在为止还挺好。

With the third click, the function was called as initiate(500) , the spot fid1 was left unchanged at 500 , and the onclick handler was set to call initiate(200) . 第三次单击，该函数被称为fid1 initiate(500) ，点fid1在500保持不变，并且onclick处理程序设置为调用fid1 initiate(200) 。 Um... 嗯...

With the fourth click, the function was called as initiate(200) , the spot fid1 was set to hold 300 , and the onclick handler was set to call initiate(300) . 第四次单击时，该函数称为initiate(200) ，现场fid1设置为保持300 ，而onclick处理程序被设置为调用fid1 initiate(300) 。

So the issue is that if you want to change the handler to hold always the current value in fid1 , then you shouldn't change the handler unless n > x . 因此，问题在于，如果要更改处理程序以始终将当前值保存在fid1 ，那么除非n > x否则不应更改处理程序。

Answer 2

There seem to be several errors in here of how things are placed. 这里的事物放置方式似乎存在一些错误。 This rearrangement should work: 这种重新安排应该起作用：

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();
}

There is plenty of room for optimization, but this should be pretty clear. 有足够的优化空间，但这应该很清楚。

Update 更新

Here is a version that I think is relatively clean: 这是我认为比较干净的版本：

<!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>

I would still probably wrap the whole thing in an IIFE in order to not expose anything on the global scope, but other than that, this code is now reasonably readable, and reasonably efficient, I believe. 我可能仍会将整个内容包装在IIFE中，以免在全局范围内暴露任何内容，但除此之外，我相信这段代码现在已经相当合理地可读且相当有效。

Answer 3

here's a clean version 这是一个干净的版本

<!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>

Don't just copy paste this. 不要只是复制粘贴此内容。 If it works (I can't test it right now), then try to understand what it's doing. 如果它有效（我现在无法测试），请尝试了解它的作用。 If you can't then please ask, I can add some comments if you need them 如果不能，请提出要求，如果需要，我可以添加一些评论

Answer 4

If you click the button really fast this change won't take effect.... 如果您快速单击按钮，此更改将不会生效。

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

Answer 5

Just put this: 只需输入以下内容：

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

Outside your initiate function 在您的启动功能之外

like: 喜欢：

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 个解决方案

解决方案1
3 已采纳 2013-12-13 20:07:56

解决方案2
1 2013-12-13 20:05:57

Update 更新

解决方案3
1 2013-12-13 20:06:04

解决方案4
0 2013-12-13 20:00:40

解决方案5
-1 2013-12-13 20:00:19

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

问题描述

5 个解决方案

解决方案1 3 已采纳 2013-12-13 20:07:56

解决方案2 1 2013-12-13 20:05:57

Update 更新

解决方案3 1 2013-12-13 20:06:04

解决方案4 0 2013-12-13 20:00:40

解决方案5 -1 2013-12-13 20:00:19

解决方案1
3 已采纳 2013-12-13 20:07:56

解决方案2
1 2013-12-13 20:05:57

解决方案3
1 2013-12-13 20:06:04

解决方案4
0 2013-12-13 20:00:40

解决方案5
-1 2013-12-13 20:00:19