addEventListener working in console but not working in JS

Related searches

I have this code for a book library. https://jsfiddle.net/j5mxws4n/

I'm at the point of working with the 'read' sign where I want to add an event on click to change the icon from tick to X. I can do it through google console but when I do it in JS, I get a null error which is kinda weird.

the way I'm trying to do it it:

document.querySelector('#sign).addEventListener('click', (e)=>{
if(e.target.innerHTML === '✔'){
        e.target.innerHTML = 'X'}
else{
        e.target.innerHTML = '✔'
})

I get a null error even if I just type:

let sign = document.querySelector('#sign').textContent;

addEventListener not working? Using exact example from Cashier., addEventListener not working? Are you sure there's no errors in the browser console? Try remove all the js code and leave only addEventListener itself. Note: Do bear in mind that this question is not about how there is a bug in JS, even if the title may suggest so, it is about how I can't get it to work since I've probably got the syntax wrong. Please feel free to rename it if you wish.

//You forgot to add the closing '
document.querySelector('#sign).addEventListener('click', (e)=>{

This line should be written like this

document.querySelector('#sign').addEventListener('click', (e)=>{

EventTarget.addEventListener(), addEventListener() works by adding a function or an object that implements EventListener Available only in code running in XBL or in the chrome of the Firefox browser. See DOM Level 3 Events and JavaScript Event order for a detailed explanation. className) // WARNING: `this` is not `my_element` console.log(e. I am building simple counter application and in javascript addEventListernis not working giving this error error in chrome developer tool Here is my javaScript Code

document.querySelector('#sign').addEventListener('click', (e)=>{
if(e.target.innerHTML === '✔'){
        e.target.innerHTML = 'X'}
else{
        e.target.innerHTML = '✔'
}})
let sign = document.querySelector('#sign').textContent;
<h1>click on check icon </h1>
<div id='sign'>✔</div>

What went wrong? Troubleshooting JavaScript, It won't always be that simple to work out what's wrong in your code, but at least got number-game-errors.html open in, and open your JavaScript console. addeventListener is not a function", which means that the function� Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions, and Opera 6.0 and earlier versions. However, for these specific browser versions, you can use the attachEvent() method to attach event handlers (see "More Examples" below for a cross-browser solution).

Javascript - Can't get 'getElementsByClassName' working, getElementById( 'showMenu' ),. It does work! Why won't the class selector work but the id one will? Thanks. Javascript, addEventListener not working. Hey guys! I have made a table, with 10 tr's each having 10 td's. console. clear (); The code does not work, have you

Handling Events :: Eloquent JavaScript, You have power over your mind—not outside events. Realize this, and Some programs work with direct user input, such as mouse and keyboard actions. button.addEventListener("mousedown", event => { console.log("Handler for button. This method is asynchronous, so it returns its response in an object in a callback method. The response object contains the following field: The message which is sent with the fired event. For more information, see “Customize Keyboard Shortcuts for a Salesforce Console in Salesforce Classic” in the online help.

An event listener is a procedure in JavaScript that waits for an event to occur. The simple example of an event is a user clicking the mouse or pressing a key on the keyboard. The addEventListener() is an inbuilt function in JavaScript which takes the event to listen for, and a second argument to be called whenever the described event gets

Comments
  • The code you've placed here on SO has a syntax error; please include a minimal reproducible example here on Stack Overflow, not only on an external website. You can use Stack Snippets to do so.
  • You are adding the sign element dynamically. Since one does not exist when the page first loads, the eventListener does not get added to it
  • The ID will not be unique and will not be available on page load (dynamic) so your code will not work. see my answer for a working solution