Button icon switch (class attribute)?

Question

Kinda new to this, why is this not working? I created 2 buttons which are a play button icon and an arrow down icon. The buttons should switch on click to different ones by changing the "class" attribute. I tried something but it's obviously not working. I think my problem is that I don't know how to declare the div1 and div2 variables.

 var div1 = document.getElementById("div1")
    var div2 = document.getElementById("div2")


function updateButton() {
    var className = div1.getAttribute("class");
    if(className=="fa-solid fa-play") {
    div1.className = "fa-solid fa-pause";
    }
    if(className=="fa-solid fa-pause") {
    div1.className = "fa-solid fa-play";
    }
    }

    function updateButton2() {
        const div2 = document.getElementById(div2)
    var className = div2.getAttribute("class");
    if(className=="fa-solid fa-angle-down") {
    div2.className = "fa-solid fa-angle-up";
    }
    if(className=="fa-solid fa-angle-up") {
    div2.className = "fa-solid fa-angle-down";
    }
    }

<!DOCTYPE html>
<html>
<head>
    <script src="https://kit.fontawesome.com/0055907593.js" crossorigin="anonymous"></script>
</head>
<body>

    <div>
        <button class="player__button toggle" title="Toggle Play"><i class="fa-solid fa-play" id="div1" onclick="updateButton"></i></button>
        
         <button class="player__button toggle" title="Toggle Play"><i class="fa-solid fa-angle-down" id="div2" onclick="updateButton2"></i></button>
          </div>
</body>
</html>

you already declared `var div2 = document.getElementById("div2")` at the top of your js code, if you declare it again with the same name like you did here inside your function `const div2 = document.getElementById(div2)` you get an error becuz div2 was used before it was declared which is illegal for a const — Chris G, Jan 05 '23 at 16:59
Inline event handlers like `onclick` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Jan 05 '23 at 17:10
shouldn't had closed the question, add the () to the function call was not the only problem that this code had, also there was no need for 2 separate functions for this — Chris G, Jan 05 '23 at 17:16

score 0 · Answer 1 · answered Jan 05 '23 at 17:04

0

You should delete the line const div2 = document.getElementById(div2) since div2 is already an element reference, or replace it with const div2 = document.getElementById("div2")

answered Jan 05 '23 at 17:04

Live bug help - www.dialect.so

1,416
1
2
11

score 0 · Answer 2 · answered Jan 05 '23 at 17:04

So I'd move the onclick... to the button not the i and add ()

Leaving the onclick on the i means only when the image is clicked does the change happen (see second button without change, clicking the very corner won't change the second button but the first button will change)

var div1 = document.getElementById("div1")
var div2 = document.getElementById("div2")

function updateButton() {
  var className = div1.getAttribute("class");
  if(className=="fa-solid fa-play") {
    div1.className = "fa-solid fa-pause";
  }
  if(className=="fa-solid fa-pause") {
    div1.className = "fa-solid fa-play";
  }
}

function updateButton2() {
  var className = div2.getAttribute("class");
  if(className=="fa-solid fa-angle-down") {
    div2.className = "fa-solid fa-angle-up";
  }
  if(className=="fa-solid fa-angle-up") {
    div2.className = "fa-solid fa-angle-down";
  }
}

<script src="https://kit.fontawesome.com/0055907593.js" crossorigin="anonymous"></script>

<div>
  <button class="player__button toggle" title="Toggle Play" onclick="updateButton()">
    <i class="fa-solid fa-play" id="div1"></i>
  </button>
        
  <button class="player__button toggle" title="Toggle Play">
    <i class="fa-solid fa-angle-down" id="div2" onclick="updateButton2()"></i>
  </button>
</div>

See my comment about moving `onclick` to the button. It will change if you click on the image, I left that to show the difference — depperm, Jan 05 '23 at 18:07

score 0 · Answer 3 · answered Jan 05 '23 at 17:07

two minor problems 1) add () to your function calls. 2) div2 already defined.

var div1 = document.getElementById("div1")
var div2 = document.getElementById("div2")


function updateButton() {
  console.log("inside")
  var className = div1.getAttribute("class");
  if (className == "fa-solid fa-play") {
    div1.className = "fa-solid fa-pause";
  }
  if (className == "fa-solid fa-pause") {
    div1.className = "fa-solid fa-play";
  }
}

function updateButton2() {
 // const div2 = document.getElementById(div2)
  var className = div2.getAttribute("class");
  if (className == "fa-solid fa-angle-down") {
    div2.className = "fa-solid fa-angle-up";
  }
  if (className == "fa-solid fa-angle-up") {
    div2.className = "fa-solid fa-angle-down";
  }
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://kit.fontawesome.com/0055907593.js" crossorigin="anonymous"></script>
</head>

<body>

  <div>
    <button class="player__button toggle" title="Toggle Play"><i class="fa-solid fa-play" id="div1" onclick="updateButton()"></i></button>

    <button class="player__button toggle" title="Toggle Play"><i class="fa-solid fa-angle-down" id="div2" onclick="updateButton2()"></i></button>
  </div>
</body>

</html>

Thanks man, you're the only one that fixed it. Probably due to `console.log("inside")` , what is that? — snaphix, Jan 05 '23 at 18:06
just making sure the function executes, you can delete that. please accept answer if it helped — DCR, Jan 05 '23 at 18:11

Button icon switch (class attribute)?

3 Answers3