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

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 >
      <div >
        <div >
          <input type="checkbox" name="checkbox" id="checkbox1" />
        </div>
        <div >
          <h1 id="greetingL">Hello</h1>
        </div>
      </div>
      <div >
        <div >
          <input type="checkbox" name="checkbox" id="checkbox2" />
        </div>
        <div >
          <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 = "";
  }
});

CodePudding user response：

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 >
  <div >
    <div >
      <input type="checkbox" name="checkbox" id="checkbox1" />
    </div>
    <div >
      <h1 id="greetingL">Hello</h1>
    </div>
  </div>
  <div >
    <div >
      <input type="checkbox" name="checkbox" id="checkbox2" />
    </div>
    <div >
      <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.