I have created two checkbox to change the text color in the same page but it work only one checkbox

Sovann Sun 0
Viewed 29

Please help! I have made the simple two-check box to change the text color on the same page but the result works with only one check box (left-box) the (right-box) is not working. if I comment the (left-box) of JavaScript the (right-box) work normally

Thank you for your help

HTML

<!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>Example</title>
  </head>
  <body>
    <div class="container">
      <div class="left-box">
        <div class="checkbox">
          <input type="checkbox" name="checkbox" id="checkbox1" />
        </div>
        <div class="display-text">
          <h1 id="greetingL">Hello</h1>
        </div>
      </div>
      <div class="right-box">
        <div class="checkbox">
          <input type="checkbox" name="checkbox" id="checkbox2" />
        </div>
        <div class="display-text">
          <h1 id="greetingR">Hello</h1>
        </div>
      </div>
    </div>
    <script src="./checkboxleft.js"></script>
    <script src="./checkboxright.js"></script>
  </body>
</html>

JavaScript for the Left-Box

const leftcheckbox = document.getElementById("checkbox1");
const greetingtex = document.getElementById("greetingL");

leftcheckbox.addEventListener("change", () => {
  if (leftcheckbox.checked) {
    greetingtex.style.color = "Red";
  } else {
    greetingtex.style.color = "";
  }
});

JavaScript for the Right-Box

const rightcheckbox = document.getElementById("checkbox2");
const greetingtex = document.getElementById("greetingR");

rightcheckbox.addEventListener("change", () => {
  if (rightcheckbox.checked) {
    greetingtex.style.color = "Red";
  } else {
    greetingtex.style.color = "";
  }
});
javascript html
1 Answers

You're import two scripts, these scripts have the same const "greetingtex". You can change the name to one of them and it should works.

const leftcheckbox = document.getElementById("checkbox1");
const greetingtexL = document.getElementById("greetingL"); // name change

leftcheckbox.addEventListener("change", () => {
  if (leftcheckbox.checked) {
    greetingtexL.style.color = "Red";
  } else {
    greetingtexL.style.color = "";
  }
});

const rightcheckbox = document.getElementById("checkbox2");
const greetingtexR = document.getElementById("greetingR"); // name changed

rightcheckbox.addEventListener("change", () => {
  if (rightcheckbox.checked) {
    greetingtexR.style.color = "Yellow";
  } else {
    greetingtexR.style.color = "";
  }
});
<div class="container">
  <div class="left-box">
    <div class="checkbox">
      <input type="checkbox" name="checkbox" id="checkbox1" />
    </div>
    <div class="display-text">
      <h1 id="greetingL">Hello</h1>
    </div>
  </div>
  <div class="right-box">
    <div class="checkbox">
      <input type="checkbox" name="checkbox" id="checkbox2" />
    </div>
    <div class="display-text">
      <h1 id="greetingR">Hello</h1>
    </div>
  </div>
</div>

You must always work with the console open, there is probably an error message that will tell you what is happening and in this case it is that you have a constant with the same name.

Think that the two scripts, although they are different files, when you import them in the same html, it is as if they became one. Perhaps you thought that their scopes would not have problems because they are different scripts, I hope you are motivated to use the console and learn to deal with errors in the code, it is day to day programming xD.

Eudes Serpa0
Related