Question

所以这是我目前在我的扩展中的代码。我想制作一个游戏，当你出现时点击它。问题是无论我做什么，我点击按钮时似乎都会出错。

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>

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

Answer 1

所以你的主要问题是当你创建一个新元素时，在这个例子中是$ newdiv，你没有重新分配你的onclick创建。第一个工作是因为你是第一次分配它，然后每个圆圈没有onclick，因此点击时什么也没做。

要修复它，我必须稍微重构一下代码，以便我们可以在makeDiv函数中使用myFunction，以便在每次创建新圆时都能分配它。

＆＃13;

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

＆＃13;

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

＆＃13;

为什么它会给我一个错误点击？

1 个答案: