3 images with the same logic flow, but only the top 2 work. Where is the flaw in my logic?

Question

Edit: found solution. This works: https://codepen.io/kristianBan/pen/RwNdRMO

There are 3 images. When one is clicked, it needs to gain a red outline and remove any outline from the other two with null. The top 2 images work just fine, but once the 3rd (l_mage_img) gets clicked it stays red no matter what. What am I missing here? As far as I can tell all the values are evaluating as they should so I'm very confused.

function character_selection() {
  var k_c = document.getElementById("knight_img");
  var d_c = document.getElementById("d_mage_img");
  var l_c = document.getElementById("l_mage_img");
  var k_clicked;
  var d_clicked;
  var l_clicked;
  var running = true;

  if (running == true) {
    setInterval(function() {
      if (d_clicked == true || l_clicked == true) { //checks for knight
        k_c.style.border = null;
        d_clicked = false;
        l_clicked = false;

      } else {
        k_c.onclick = function() { //turn red to indicate selection
          k_clicked = true;
          k_c.style.border = "solid #FF0000";

        };

      };

      if (k_clicked == true || l_clicked == true) {
        //checks for d mage
        d_c.style.border = null;
        k_clicked = false;
        l_clicked = false;

      } else {
        d_c.onclick = function() {
          d_clicked = true;
          d_c.style.border = "solid #FF0000";
        };

      };

      if (d_clicked == true || k_clicked == true) { //checks for l mage
        l_c.style.border = null;
        d_clicked = false;
        k_clicked = false;


      } else {
        l_c.onclick = function() {
          l_clicked = true;
          l_c.style.border = "solid #FF0000";
        };

      };

    }, 16);

  };
};
character_selection();

#battle_menu {
  background-image: url('obsidian2.jpg');
  max-width: fit-content;
  padding-bottom: 1vh;
  max-height: 90vh;
  border-radius: 2%;
  margin-top: 2vh;
  font-size: large;
}

#battle_menu>div {
  padding-top: 1vh;
  display: flex;
  flex-direction: row;
  max-width: 10vw;
  border-radius: 8%;
}

#warrior_name,
#d_mage_name,
#l_mage_name {
  font-size: 1em;
  color: black;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.441);
  resize: none;
  overflow: hidden;
  margin-top: -1vh;
}

#battle_menu>div>img {
  display: flex;
  flex-direction: row;
  max-width: 10vw;
  border-radius: 15%;
}

userdQgc · Answer

Your code is complex to debug. The third image border stays red because we are not resetting it. I couldn't find where. Let us see if someone can find that.

Another solution:

Here is a better way to achieve what you want: Just set the border for the image we click and reset the border for other images.

You don't need to add the same onclick function everytime in setInterval(). You also don't need those flag variables.

function character_selection() {
  var k_c = document.getElementById("knight_img");
  var d_c = document.getElementById("d_mage_img");
  var l_c = document.getElementById("l_mage_img");

  k_c.onclick = function() {
    k_c.style.border = "solid #FF0000"; // highlight k
    d_c.style.border = null;
    l_c.style.border = null;
  };

  d_c.onclick = function() {
    k_c.style.border = null;
    d_c.style.border = "solid #FF0000"; // highlight d
    l_c.style.border = null;
  };

  l_c.onclick = function() {
    k_c.style.border = null;
    d_c.style.border = null;
    l_c.style.border = "solid #FF0000"; // highlight l
  };

};
character_selection();

#battle_menu {
  background-image: url('obsidian2.jpg');
  max-width: fit-content;
  padding-bottom: 1vh;
  max-height: 90vh;
  border-radius: 2%;
  margin-top: 2vh;
  font-size: large;
}

#battle_menu>div {
  padding-top: 1vh;
  display: flex;
  flex-direction: row;
  max-width: 10vw;
  border-radius: 8%;
}

#warrior_name,
#d_mage_name,
#l_mage_name {
  font-size: 1em;
  color: black;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.441);
  resize: none;
  overflow: hidden;
  margin-top: -1vh;
}

#battle_menu>div>img {
  display: flex;
  flex-direction: row;
  max-width: 10vw;
  border-radius: 15%;
}

3 images with the same logic flow, but only the top 2 work. Where is the flaw in my logic?

1 Answers