How to change elements selected using querySelectorAll-CodePudding

Suppose I have 3 buttons:

.all-buttons{
  display:flex;
  width: 100%
 }
 .bttn{
  width: 33%
  border: none;
  background-color: blue;
  padding: 20px 20px;
color: white;
  }

<html>
<head><title>yes</title></head>
<body>
<div >
  <button >BUTTON1</button>
  <button >BUTTON2</button>
  <button >BUTTON3</button>
</div>
</body>
</html>

As of my understanding I can use JavaScript const buttons = document.querySelectorAll('bttn'); which will create an array with every element with the class 'bttn'. How do I change the style of a button? For example, say I want to change the background-color of Button2 if I click on it. How do I get Button2 using classes in javascript? I have tried this:

const buttons = document.querySelectorAll('link');

Array.from(buttons).forEach(el => {
    el.addEventListener('click', function(event) {
               //code
    });
});

My end goal is to create a drop-down menu for each of the buttons but I would like to avoid adding an id for each button. Any input is appreciated.

CodePudding user response：

For getting elements by className, you have 2 options:

getElementsByClassName (without ".")

const buttons = document.getElementsByClassName('bttn');

querySelectorAll (with ".")

const buttons = document.querySelectorAll('.bttn');

And for changing the style of an element, you can use .style property on that element:

element.style.backgroundColor = 'blue';

So this code will help you:

const buttons = document.querySelectorAll('.bttn');

Array.from(buttons).forEach(el => {
  el.addEventListener('click', function(event) {
    el.style.backgroundColor = "blue";
  });
});

Read more here.

CodePudding user response：

Hope it helps!

const buttons = document.querySelectorAll('.bttn'); // You must declare element's type; class (.) or id (#).

Array.from(buttons).forEach(el => {
    el.addEventListener('click', function(event) {
               el.style.color = "red"; // Added the line for changing the style of the button.
    });
});

<button >BUTTON1</button>
<button >BUTTON2</button>
<button >BUTTON3</button>

CodePudding user response：

First, document.querySelectorAll('bttn'); will not get elements with class equal to .bttn but it gets the elements with tag name equal to bttn.

You need to add the . like document.querySelectorAll('.bttn');

Then, you need to loop through with forEach and on each button add an event listener with addEventListener method on click, then you can change the color with style or create a class for the color and use classList methods.

const buttons = document.querySelectorAll('.bttn');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    button.classList.toggle('red');
  })
})

.all-buttons{
  display:flex;
  width: 100%
 }
 .bttn{
  width: 33%
  border: none;
  background-color: blue;
  padding: 20px 20px;
color: white;
  }

.red {
  background-color: red;
}

<html>
<head><title>yes</title></head>
<body>
<div >
  <button >BUTTON1</button>
  <button >BUTTON2</button>
  <button >BUTTON3</button>
</div>
</body>
</html>

CodePudding user response：

i think you need,

change element using queryseletorall
dropdown menu to each button
without using id to each button to achieve this try like below,

const nodeList = document.querySelectorAll(".dropbtn");
  const submenuList = document.querySelectorAll(".dropdown-content");

  //alert(nodeList.length);
  for (let i = 0; i < nodeList.length; i  ) {
  
    nodeList[i].addEventListener('click', function(event) {
      submenuList[i].classList.toggle("show");
      
      });
  
    
  }

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}


.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}


.dropdown {
  position: relative;
  display: inline-block;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}


.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


.dropdown-content a:hover {background-color: #ddd}

.show {display:block;}

<div >
    <button  >Dropdown</button>
   <div  >
     <a href="#">Link 1</a>
     <a href="#">Link 2</a>
     <a href="#">Link 3</a>
  </div>
 </div>

  <div >
    <button >Dropdown</button>
   <div >
     <a href="#">Link- 1</a>
     <a href="#">Link- 2</a>
     <a href="#">Link- 3</a>
  </div>
 </div>

if any query please comment