 Blasted buttons, addEventListener not listening |
  |
| sea-skimmer |
 Aug 27 2021, 10:05 AM
Post
#1
|
|
Group: Members Posts: 5 Joined: 19-August 21 Member No.: 28,054  |
I was messing around with this script and changed the select option to button option but it won't respond to my buttons.
It's possible i'm in way over my head. <html> <body> <button value="sunny">sunny</button> <button value="rainy">rainy</button> <button value="'snowing">sunny</button> <button value="overcast">sunny</button> <p id="weather"></p> <script> const select = document.querySelector('button'); const para = document.querySelector('p'); button.addEventListener('change', setWeather); function setWeather() { const choice = button.value; if (choice === 'sunny') { para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.'; } else if (choice === 'rainy') { para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.'; } else if (choice === 'snowing') { para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.'; } else if (choice === 'overcast') { para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.'; } else { para.textContent = ''; } } </script> </body> </html> |
  |
 
|
| Christian J |
Aug 27 2021, 03:28 PM
Post
#2
|
|
.  Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
QUOTE(sea-skimmer @ Aug 27 2021, 05:05 PM)  <button value="'snowing">sunny</button> A couple of typos. QUOTE const para = document.querySelector('p'); The above gets the first P element, but since you gave the P an ID it's safer to use that instead (on a similar note, you could detect each relevant BUTTON element by a CLASS value, so that any other BUTTON element won't be fired). QUOTE button.addEventListener('change', setWeather); The onChange event doesn't detect clicks, use onClick instead. QUOTE const select = document.querySelector('button'); The above returns only the first matching (BUTTON) element. You can use querySelectorAll to get a list of all BUTTON matches, then loop through each of these to find the one that's been clicked. I don't how to pass function parameters (in this case, which button was clicked) with AddEventListener, except by using anonymous functions and the this keyword, so here goes: CODE var button = document.querySelectorAll('button'); var para = document.querySelector('#weather'); function setWeather() { for(var i=0; i<button.length; i++) { button[i].addEventListener('click', function() { var choice = this.value; if (choice === 'sunny') { para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.'; } else if (choice === 'rainy') { para.textContent = 'Rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.'; } else if (choice === 'snowing') { para.textContent = 'The snow is coming down - it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.'; } else if (choice === 'overcast') { para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.'; } else { para.textContent = ''; } }); } } window.addEventListener('DOMContentLoaded', setWeather, false); |
|
|
|
| sea-skimmer |
Aug 28 2021, 05:49 AM
Post
#3
|
|
Group: Members Posts: 5 Joined: 19-August 21 Member No.: 28,054 |
Thanks very much for your help, I have a lot to learn.
 |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 27th April 2024 - 07:58 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC