为什么它给我一个错误onclick？

所以这里是我的代码，用于我目前为止的扩展。我想制作一个游戏，当它出现时点击该点。问题是无论我做什么，我点击按钮似乎都会出错。为什么它给我一个错误onclick？

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

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

我知道这很可能是一个愚蠢的错误，但我似乎无法弄清楚。该分数将计入第一个按钮，但不包括其余部分。

来源

2016-01-31 b sovs

所以你的主要问题是，当你创建一个新的元素，在这种情况下，$ newdiv，你没有重新分配你的onclick创建。第一个工作，因为你第一次分配它，然后每个圈子没有onclick，因此点击时没有做任何事情。

为了修复它，我不得不重构你的代码，以便我们可以在makeDiv函数内部使用myFunction，以便每次创建新的圆时都可以分配它。

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

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

 
\t \t $newdiv.css({ 
 
\t \t \t 'position':'absolute', 
 
\t \t \t 'left':posx+'px', 
 
\t \t \t 'top':posy+'px', 
 
\t \t \t 'display':'none' 
 
\t \t }).appendTo('body').fadeIn(500).delay(1000).fadeOut(500, function(){ 
 
\t \t \t $(this).remove(); 
 
\t \t \t makeDiv(); 
 
\t \t }); 
 
\t \t 
 
\t \t // Assign MyFunction as onclick each time we make a new circle. 
 
\t \t $newdiv.on("click", myFunction); 
 
\t } 
 
\t 
 
\t 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>

来源

2016-01-31 23:25:47

为什么它给我一个错误onclick？

回答

相关问题