CODEWITHSUNDEEP
javascripthtml
user7787843
user7787843

Reputation:

Why is function being called without clicking on button?

I am trying to move the smaller block 'onclick' of the button in html. But either it is not calling that function or may be it is calling it even before the button is clicked. How to find out and solve to get the required response?

<html>
<head>
<script>
var pos = 0;
//getting box element
var box = document.getElementById("box");
var time = setInterval(move, 10);
document.getElementById("btn1").onclick = move(){
    if(pos >= 150){
        clearInterval(time);
    } else{
        pos += 1;
        box.style.left = pos+"px";
    }
};
</script>
</head>
<body>
<h1><p id="p1" style="color:#dd3333">Sample Game</p></h1>
<p id="p2" styel="color:#b5b5b5">Click on the button below</p>
<style>
#container{
width:200px;
height:200px;
background:green;
position:relative;
}
#box{
width:50px;
height:50px;
background:red;
position:absolute;
}
</style>
<div id="container">
<div id="box"></div>
</div>
<br></br>
<button id="btn1">Click Me</button>
</body>

</html>

Upvotes: 0

Views: 2074

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206199

You're directly calling a function move. Instead:

function move(){
    if(pos >= 150){
        clearInterval(time);
    } else{
        pos += 1;
        box.style.left = pos+"px";
    }
}


document.getElementById("btn1").addEventListener("click", move);

Additionally, since you don't use any DOM ready handler to make sure the document is ready and parsed by JS - place your <script> file before the closing </body> tag. or do a quick google how to incorporate such a function that will tell you JS can safely operate over DOM elements. (jQuery here, for example is your friend)

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <style>
    #container {
      width: 200px;
      height: 200px;
      background: green;
      position: relative;
    }
    #box {
      width: 50px;
      height: 50px;
      background: red;
      position: absolute;
    }
  </style>

  <div id="container">
    <div id="box"></div>
  </div>

  <button id="btn1">Click Me</button>

  <script>
    var pos = 0;
    var box = document.getElementById("box");
    var time = null;


    function move() {
      if (pos >= 150) {
        clearInterval(time);
      } else {
        pos += 1;
        box.style.left = pos + "px";
      }
    }

    document.getElementById("btn1").addEventListener("click", function() {
      time = setInterval(move, 10);
    });
  </script>
</body>

</html>

Upvotes: 2

ADL
ADL

Reputation: 2856

Try this, if you do not need to reuse the function.

   document.getElementById('btn1').onclick = function()
   {
       alert('you clicked me');
   }

Upvotes: 0

objectively C
objectively C

Reputation: 1008

<html>
<head>

</head>
<body>
<h1><p id="p1" style="color:#dd3333">Sample Game</p></h1>
<p id="p2" styel="color:#b5b5b5">Click on the button below</p>
<style>
#container{
width:200px;
height:200px;
background:green;
position:relative;
}
#box{
width:50px;
height:50px;
background:red;
position:absolute;
}
</style>
<div id="container">
<div id="box"></div>
</div>
<br></br>
<button id="btn1">Click Me</button>
<script>

function move(){
if(pos >= 150){
    clearInterval(time);
} else{
    pos += 1;
    box.style.left = pos+"px";
}
}


document.getElementById("btn1").addEventListener("click", move);
var pos = 0;
//getting box element
var box = document.getElementById("box");
var time = setInterval(move, 10);
</script>
</body>

</html>

Upvotes: 0

Related Questions