I'd like to perform the logic in the "onClick" through the event listener in jS but it only seems to run once? I have the class in all four but I can't figure out why it seems to only work for the first?
HTML:
<button id='btn-1' type="button" name="first" class="breakdown main-text" onclick="enableButton('btn-2');disableButton('btn-1');show('btn-1')"> Breakdown Start </button>
<button id='btn-2' type="button" name="second" class="breakdown main-text" onclick="enableButton('btn-3');disableButton('btn-2');show('btn-2')" disabled> Repair Start </button>
<button id='btn-3' type="button" name="third" class="breakdown main-text" onclick="enableButton('btn-4');disableButton('btn-3');show('btn-3')" disabled> Repair End </button>
<button id='btn-4' type="button" name="fourth" class="breakdown main-text" onclick="show('btn-4')" disabled> Breakdown Ended </button>
JS:
let button1 = document.querySelector('#btn-1')
let button2 = document.querySelector('#btn-2');
let button3 = document.querySelector('#btn-3');
let button4 = document.querySelector('#btn-4');
const breakdownButton = document.querySelector('.breakdown');
breakdownButton.addEventListener('click', function() {
console.log(this.innerHTML);
});
You can add many event handlers to one element. You can add many event handlers of the same type to one element, i.e two "click" events. You can add event listeners to any DOM object not only HTML elements. i.e the window object.
You can assign as many handlers as you want to an event using addEventListener(). addEventListener() works in any web browser that supports DOM Level 2.
You need to use querySelectorAll
which will return a collection.Now use spread operator
(three dots) to convert it to array and use forEach
.Inside forEach
callback add the event listener to it
[...document.querySelectorAll('.breakdown')].forEach(function(item) {
item.addEventListener('click', function() {
console.log(item.innerHTML);
});
});
<button id='btn-1' type="button" name="first" class="breakdown main-text"> Breakdown Start </button>
<button id='btn-2' type="button" name="second" class="breakdown main-text" disabled> Repair Start </button>
<button id='btn-3' type="button" name="third" class="breakdown main-text" disabled> Repair End </button>
<button id='btn-4' type="button" name="fourth" class="breakdown main-text" disabled> Breakdown Ended </button>
In your snippet you have also attached inline event handler,that may not be necessary.
If the objective is to enable the next button then a function
to enable it can be called from the callback function of the event handler
Need to use querySelectorAll
instead of querySelector
. And iterate over the list like this.
const breakdownButton = document.querySelectorAll('.breakdown');
// It add event listeners for the first button element.
// you can use forloop or map function to iterate over the list elements
// and here i used breakdownButton[0] as an example.
breakdownButton[0].addEventListener('click', function() {
console.log(this.innerHTML);
});
Use iterate functions like forEach or map. I used forEach
const breakdownButton = document.querySelectorAll('.breakdown');
breakdownButton.forEach(function(btn) {
btn.addEventListener('click', function() {
console.log();
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With