Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by James Home
James Home
12,011 Points

addEventListener, second click using `if/else`

I am trying to toggle a second click using addEventListener but it doesn't seem to register that the innerHTML has changed so there's no toggle functionality. Where am I going wrong?

I can see where it might go wrong in that it that it passes the conditional if even if it is currently done which is not as I expect. 

icons.js:7 (1) before click: done
3icons.js:7 (3) before click: add_circle

I have opened the app.

icons.js:10 click!
icons.js:11 <i class=​"panel--option material-icons fs4 c-primary va-textbottom">​done​</i>​
icons.js:12 after click: done
icons.js:16 if

I clicked the already icon with the content "done". Nothing happens.

icons.js:10 click!
icons.js:11 <i class=​"panel--option material-icons fs4 c-primary va-textbottom">​done​</i>​
icons.js:12 after click: add_circle
icons.js:16 if

I clicked a circle. It changes to "done" but nothing happens after I click it (see below). 

icons.js:10 click!
icons.js:11 <i class=​"panel--option material-icons fs4 c-primary va-textbottom">​done​</i>​
icons.js:12 after click: done
icons.js:16 if

I click the former add_circle but it does not respond.

<ul class="list">
  <li>Done</li>
  <li>add_circle</li>
  <li>add_circle</li>
</ul>

var icon = document.querySelectorAll('.list li');

icon.forEach(function(e){
  console.log('before click: '+ e.innerHTML);
  e.addEventListener('click', function (f) {
    f.preventDefault();
    console.log('click!');
    console.log(e);
    console.log('after click: '+ e.innerHTML);

    if (e.innerHTML = 'add_circle') {
        e.innerHTML = 'done'
        console.log('if');
      } else  {
        e.innerHTML = 'add_circle'
        console.log('else');
      }

  })
});

Thanks.

1 Answer

miikis
miikis
44,957 Points

Hi James,

Your naming is tripping you up. Also, an Event object does not have an innerHTML property. Instead, that attribute is on the Event object's target property. Below is a working version of what you're trying to do. Note how the semantic naming simplifies things and thereby deters insanity ;)

const icons = document.querySelectorAll('.list li');

function toggleIcon(event) {
    event.preventDefault()

    const $icon = event.target
    $icon.innerHTML = $icon.innerHTML === 'add_circle' ? 'done' : 'add_circle'
}

icons.forEach(function (icon) {
    icon.addEventListener('click', toggleIcon)
})
James Home
James Home
12,011 Points

I haven't had time since posting this but wanted to say thanks. It is so much cleaner.