Onclick Event Getting Called Automatically

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

Automatically triggered a function in a onClick while mounting the component

In react - onClick should get a function to execute, not execute a function like you did.

Wrap your function with arrow key function like this and it will work:

const removeUser = (email) => {
    alert(email)
}

const usersList = users.map((user) =>
    <li key={user._id}>
        {user.Name}
        {isAdmin && <FontAwesomeIcon icon={faTrashAlt}  onClick={() => removeuser(user.Email)}/>}
    </li>
);

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>

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;

Why is my onClick being called on render? - React.js

You need pass to onClick reference to function, when you do like this activatePlaylist( .. ) you call function and pass to onClick value that returned from activatePlaylist. You can use one of these three options:

1. using .bind

activatePlaylist.bind(this, playlist.playlist_id)

2. using arrow function

onClick={ () => this.activatePlaylist(playlist.playlist_id) }

3. or return function from activatePlaylist

activatePlaylist(playlistId) {
  return function () {
     // you code 
  }
}

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.

ReactJS - button onClick gets called during render

It's because instead of passing the function to the event onClick, you're calling the function directly.

Try doing it this way:

<button onClick={() => { this.handleButton(60)}}>1min</button>
<button onClick={() => { this.handleButton(180)}}>3min</button>
<button onClick={() => { this.handleButton(300)}}>5min</button>

Found the answer here: React onClick function fires on render

Hope it helps!

How can I prevent executing onclick event on a tag automatically?

Create a TR, then select the inner button and attach the event listener using addEventListener instead, which will have a proper closure over the content you want to pass to getContent. Use template literals to make readable, interpolable multi-line strings:

function faq_popup(data) {
  const appendedDiv = $(`
  <div class="modal fade show" tabindex="-1" id="myModal" role="dialog" style="positon:center;">
    <div class="modal-dialog modal-dialog-centered">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="table-responsive">
          <table class="table mb-0">
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>`);
  const tbody = appendedDiv.find('tbody')[0];
  data.forEach(({ content, subject }, i) => {
    const tr = tbody.appendChild(document.createElement('tr'));
    tr.innerHTML = `
      <th scope="row">${i + 1}</th>
      <td><a style="cursor:pointer">${subject}</a></td>
    `;
    tr.querySelector('a').addEventListener('click', () => getContent(content));
  });

  $('#modal_place').append(appendedDiv);
  $('#myModal').modal('show');
}

---

Related Topics