为什么在点击时给我一个错误？

Question

So here is my code for what I have so far in my extension. 所以这是到目前为止我扩展中的代码。 I want to make a game where you click on the dot when it shows up. 我想制作一个游戏，在游戏中您单击该点。 The problem is no matter what I do I seem to get an error when I click the button. 问题是无论我怎么做，当我单击按钮时似乎都出现错误。

popup.js popup.js

     //The Dot 
        (function makeDiv(){
            // vary size for fun
            var divsize = ((Math.random()*100) + 20).toFixed();
            var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
            $newdiv = $('<button type="button" id="button" style=" border-radius: 500px;outline: none;padding: 0;border: none;"></button>').css({
                'width':divsize+'px',
                'height':divsize+'px',
                'background-color': color
            });

            // make position sensitive to size and document's width
            var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
            var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

            $newdiv.css({
                'position':'absolute',
                'left':posx+'px',
                'top':posy+'px',
                'display':'none'
            }).appendTo( 'body' ).fadeIn(500).delay(1000).fadeOut(500, function(){
              $(this).remove();
              makeDiv(); 
            }); 
        })();

        //Score
          window.onload = function() {
            var a =0;
            function

 myFunction()
        {
            a= a +1;
            document.getElementById('demo').textContent=a;
        }
        document.getElementById('button').onclick = myFunction;
    }

popup.html popup.html

<html>
  <head>
  <meta charset="utf-8">
 <script src="background.js"></script>
 <script src="jquery-1.11.3.min.js"></script>

 <style>

 #score{
 position:absolute:
 margin:auto;
 left:0px;right:0px;top:40px;
 width:100%;height:10px;
 text-align:center;
 font-size:160%;
 }

</style>

 </head>

 <body style="width:400px;height:500px;">
 <script src="popup.js"></script>

 <div id="score">
 <p>Score:</p>
 <p id="demo"></p>
 <div>
 </body>

</html>

I know it is most likely a stupid error, but I can not seem to figure it out. 我知道这很可能是一个愚蠢的错误，但我似乎无法弄清楚。 The score will count for the first button but not the rest. 分数将计入第一个按钮，其余部分不计。

Answer 1

So your main problem was that when you were creating a new element, in this case $newdiv, you weren't reassigning your onclick on creation. 因此，您的主要问题是，当您创建一个新元素（在本例中为$ newdiv）时，您没有在创建时重新分配onclick。 The first one worked because you were assigning it for that first time then every circle after that had no onclick, and therefore did nothing when clicked. 第一个起作用是因为您是第一次分配它，然后之后的每个圆都没有onclick，因此在单击时没有任何作用。

To fix it I had to restructure your code a bit so that we could use myFunction inside of the makeDiv function to be able to assign it each time we create a new circle. 为了解决这个问题，我必须重新构造一下代码，以便我们可以在makeDiv函数中使用myFunction来在每次创建新圆时对其进行分配。

 (function() { //Score var a = 0; function myFunction() { a = a + 1; $("#demo").text(a); } //The Dot function makeDiv() { // vary size for fun var divsize = ((Math.random()*100) + 20).toFixed(); var color = '#'+ Math.round(0xffffff * Math.random()).toString(16); $newdiv = $('<button type="button" id="button" style=" border-radius: 500px;outline: none;padding: 0;border: none;"></button>').css({ 'width':divsize+'px', 'height':divsize+'px', 'background-color': color }); // make position sensitive to size and document's width var posx = (Math.random() * ($(document).width() - divsize)).toFixed(); var posy = (Math.random() * ($(document).height() - divsize)).toFixed(); $newdiv.css({ 'position':'absolute', 'left':posx+'px', 'top':posy+'px', 'display':'none' }).appendTo( 'body' ).fadeIn(500).delay(1000).fadeOut(500, function(){ $(this).remove(); makeDiv(); }); // Assign MyFunction as onclick each time we make a new circle. $newdiv.on("click", myFunction); } makeDiv(); // Make our initial circle })();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <meta charset="utf-8"> <script src="background.js"></script> <script src="jquery-1.11.3.min.js"></script> <style> #score{ position:absolute: margin:auto; left:0px;right:0px;top:40px; width:100%;height:10px; text-align:center; font-size:160%; } </style> </head> <body style="width:400px;height:500px;"> <script src="popup.js"></script> <div id="score"> <p>Score:</p> <p id="demo"></p> <div> </body> </html>

为什么在点击时给我一个错误？

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-01-31 23:25:47

为什么在点击时给我一个错误？

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-01-31 23:25:47

解决方案1
0 已采纳 2016-01-31 23:25:47