How to change css property when you click on button?

Question

I want when i click in each one of them to pop the span element with class color but only for that button.

[![enter image description here][1]][1]

I only achieved when i click on one of them to change the visibility to visible on all elements with class colors.

my Code : https://jsbin.com/govowakasa/edit?js

document.getElementById("btn-apple").addEventListener("click", function(e) {
  showColor()
});

function showColor() {
  const colors = document.getElementsByClassName("color");
  for (let i=0; i<colors.length; i++) {
    colors[i].style.visibility = 'visible';
}};

show your html (and maybe css) as well; the function of classname color is ambiguous — Raxi
– Raxi, Commented Dec 30, 2021 at 9:18
You can pass the index of the span as parameter to showColor function — Aymen Fezai
– Aymen Fezai, Commented Dec 30, 2021 at 9:21

Yannis Haismann · Accepted Answer · 2021-12-30 10:48:05Z

0

You can simply add this line

 fruits[i].style.backgroundColor = 'red'

answered Dec 30, 2021 at 10:48

Yannis Haismann

646 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

George Chond · Accepted Answer · 2021-12-30 12:30:00Z

You can not use the same ID for more than 1 element.

I replaced the IDs of buttons with a new class name fruit-btn.
Then I made an array in JS of both buttons and color spans.
Then I looped through each button to add an EventListener.

In the event I added another loop that hides every color span and then makes the i span visible. There is no need for a function.

const fruit_btn = document.getElementsByClassName("fruit-btn");
const color_spans = document.getElementsByClassName("color");

for (let i = 0; i < fruit_btn.length; i++) {
  fruit_btn[i].addEventListener("click", function(e) {
    for (let i = 0; i < fruit_btn.length; i++) {
      color_spans[i].style.visibility = "hidden";
    }
    color_spans[i].style.visibility = "visible";
  });
}

body {
  font-size: 2rem;
}

li {
  margin: 20px;
  list-style: none;
}

button i {
  cursor: pointer;
  font-size: 3rem;
}

.color {
  margin: 10px;
  border: 1px solid black;
  background-color: blanchedalmond;
  display: inline-block;
  padding: 10px;
  visibility: hidden;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fruits</title>
  <link rel="stylesheet" href="list.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha512-0S+nbAYis87iX26mmj/+fWt1MmaKCv80H+Mbo+Ne7ES4I6rxswpfnC6PxmLiw33Ywj2ghbtTw0FkLbMWqh4F7Q==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
</head>

<body>
  <p>
    FRUITS
  </p>
  <ul>
    <li class="items">
      <button class="fruit-btn"><i class="fas fa-apple-alt"></i></button>
      <span class="color">red and yellow</span>
    </li>
    <li class="items">
      <button class="fruit-btn"><i class="fas fa-carrot"></i></button>
      <span class="color">orange</span>
    </li>
    <li class="items">
      <button class="fruit-btn"><i class="fas fa-lemon"></i></button>
      <span class="color">yellow</span>
    </li>
    <li class="items">
      <button class="fruit-btn"><i class="fas fa-pepper-hot"></i></button>
      <span class="color">red and green</span>
    </li>
  </ul>
  <script src="/week-4/index.js"></script>
</body>

</html>

I would suggest to add/remove a Class instead of adding/removing directly CSS styling.

Thanks, yeah i totally know that and this is my old jsfidle that i sent after that i realised that and i changed 4 different ids (btn-apple, btn-carrot, btn-lemon, btn-pepper) and i did this for all of them document.getElementById("btn-apple").addEventListener("click", function(e) { showColor() }); and then the function but still couldn't get it for all. Another loop in the event is the answer. Thanks a LOT

Collectives™ on Stack Overflow

How to change css property when you click on button?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related