Onclick Function Runs Automatically

Javascript - onclick event run automatically

input.onclick =  setInterval(countdown, 1000);

In this case, the browser executes setInterval hoping to get a function as a return value. Of course, the return value is a number instead.

So, if you need to add a trigger the function at 1 second interval, after the click event, you should bind the click handler like this:

input.onclick =  function() {
    setInterval(countdown, 1000); 
};

why my onclick event triggers automatically

You're immediately invoking myFunction, and then assigning the return value (which is undefined) to onclick

document.getElementById('demo1').onclick = myFunction();

should be

document.getElementById('demo1').onclick = myFunction;

React onclick function running automatically wihout clicking

When you do this, you basically call the function. Remove the parenthesis, like on the second line:

 <button onclick = {openLong()}>Chainlink Long</button>
 <button onClick={openLong}>Chainlink Long</button>

Also, try onClick intead of onclick.

Sometimes you want to pass arguments into a function like this. In those cases, you can do like this:

<button onClick={() => openLong(arguments)}>Chainlink Long</button>

Onclick event getting called automatically

You're calling the function right away.

When you leave the parentheses on the function reference, what you're basically saying is:

Evaluate the closeThis function and assign the result to onclick

when what you really want to do is assign the function reference to the click handler:

document.getElementById("closeButton").onclick = myclassObj.closeThis;

Leave out the parentheses instead, and you'll bind the closeThis function to the onclick. What this instead says is:

Assign the function closeThis to the click handler.

You are essentially assigning the function to the variable as a first-class object, or a reference to a function.

As an aside, my personal preference is to always use an anonymous function wrapper. Sometimes you need to be able to pass parameters into your function, and this makes sure that you can more easily do so:

document.getElementById("closeButton").onclick = 
    function() {
        myclassObj.closeThis();
    };

React onClick function fires on render

Because you are calling that function instead of passing the function to onClick, change that line to this:

<button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button>

=> called Arrow Function, which was introduced in ES6, and will be supported on React 0.13.3 or upper.

How do I prevent already started onclick function in Javascript even after I reload the page?

The idea is save the startTime to localStorage. And then when we reload page, we will get the remainingTime = startTime + timer - currentTime. If remainingTime > 0, we will keep disable the button. If not, we do nothing.

And based on that idea, I updated your code to let it works. You can check the demo by the below code:

<html>
   <head>
      <title>Demo</title>
   </head>
   <body>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <button id="upside" onclick="up(true)" type="submit" class="btn btn-success">Up</button>
      <script>
         function getRemainingTimer(isNew) {
           var now = new Date();
           var timer = 15000;
           var remainingTimer = 0;
           var startTime = localStorage.getItem("startTime");
           if (startTime === null) {
             if (!isNew) return 0;
             localStorage.setItem("startTime", now.getTime());
             remainingTimer = timer;
           } else {
             remainingTimer = timer + parseInt(startTime) - now.getTime();
           }
           
           return remainingTimer;
         }
         
         
         
         
         function up(isNew) {
          
         var remainingTimer = getRemainingTimer(isNew);
         console.log(remainingTimer);
         
         if (remainingTimer > 0) {
           $("#upside").attr("disabled", true);
           $("#downside").attr("disabled", true);
           
           var timeout = setTimeout(function() {
             $("#upside").removeAttr("disabled");
             $("#downside").removeAttr("disabled");
             window.location = '/Balnce_add';
            
            localStorage.removeItem("startTime");
            
           }, remainingTimer);
         } else {
           localStorage.removeItem("startTime");
         }
         
         }
         
         up(false);
         
      </script>
   </body>
</html>

Also, you can check the live demo at https://codepen.io/tuandaodev/pen/NWgBjbv

Onclick button runs automatically on page load

You need to wrap your handler into function:

document.getElementById("nav-section").appendChild(button).onclick=function() { window.location.href='https://test/search?....c' };

Because currently you code is executed as:

Execute window.location.href='https://test/search?....c'; Which immediately reloads your page.
Assign result of this execution to onclick handler. Which has no effect as your page reloaded.

onclick event gets fired automatically

This is tricky. Because semicolon is missing in the second line of your code, parser doesn't stop there - and consumes all the tokens it can. In the end, the code's parsed as...

btn.onclick = function clickHandler() {
  console.log("Button clicked");
}(
  //btn.onclick = function clickHandler(){console.log("Now clicked"); };

  function() {
    console.log("Hello");
  }
)
();

See the difference () makes - your function expression is invoked immediately. It's funny that ...

function() { console.log('Hello') }

... is treated as its parameter value - which is ignored anyway.

After that, result of clickHandler is attempted to be reused as a function - but, as it returns undefined, JS stops with (intermediate value)(...) is not a function.

Thought it's a good idea to twist your code a bit - and made the following snippet to illustrate the idea with more, well, drama in it.

const btn = document.getElementById('btn');btn.onclick = function clickHandler(e) {  console.log('Now clicked');  return e;}  //btn.onclick = function clickHandler(){console.log("Now clicked"); };
(function() {  console.log('Hi!');})();

<button type="button" id="btn">Click me!</button>