HTML按钮点击计数

时间:2016-01-16 15:59:58

标签: javascript

我做了一个无限的游戏,我想计算点击次数。我尝试了一切但没有任何效果。我是编程的先发者,但现在我喜欢它。请有人帮帮我!这是代码(2件事:1。抱歉我的英文不好; 2.我试图复制代码的最佳方式,但这并没有表现出来):

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type=text/css>
            .button {
                background-color: red;
                float: center;
                width: 200px;
                height: 200px;
                margin-left: auto;
                margin-right: auto;
                display: block;
                margin-top: 300px;
                margin-bottom: 0%;
            }

            .body {
                background-color: yellow;
            }

        </style>
    </head>

    <body class="body" id="body">
        <button onclick="myFunction()" class="button" style="font-size:50px" ; id="gomb">Nyomj meg!</button>
        <script>
            var count = 0;
            var a = true;
            var gomb = document.getElementById("gomb");
            var body = document.getElementById("body");

            gomb.onclick = function() {
                if (a == true) {
                    gomb.style.background = "yellow";
                    gomb.innerHTML = "Na még egyszer!";
                    body.style.background = "red";
                    a = false;
                } else {
                    gomb.style.background = "red";
                    body.style.background = "yellow";
                    a = true;
                }
            };

            function myFunction() {
                if (count == 5) {
                    gomb.style.display = "none"
                } else {
                    count = count + 1;
                };
            }
        </script>
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

尝试更改代码:

window.addEventListener:这有助于您重新排列代码,以便在加载页面时分配事件并分配变量。

使用addEventListener将事件附加到html元素

给身体一个身份和名字是没有用的。

var count = 0;
var a = true;
var gomb;
var body;

window.addEventListener('load', function(e) {
  gomb = document.getElementById("gomb");
  body = document.getElementsByTagName('body')[0];

  gomb.addEventListener('click', function(e) {
    if (a==true){
      gomb.style.background = "yellow";
      gomb.innerHTML="Na még egyszer!";
      body.style.background = "red";
      a = false;
    }
    else
    {
      gomb.style.background = "red";
      body.style.background = "yellow";
      a = true;
    }
  });
});

function myFunction(){
  if(count==5) {
    gomb.style.display="none"
  }
  else
  {
    count=count+1;
  };
}
.button{
  background-color:red;
  float: center;
  width: 200px;
  height: 200px;
  margin-left:auto;
  margin-right:auto;
  display:block;
  margin-top:300px;
  margin-bottom:0%;
}
body{
  background-color: yellow;
}
<button onclick="myFunction()" class="button" style="font-size:50px"; id="gomb">Nyomj meg!</button>