Why my button dont react the first time that its been clicked?-CodePudding

When my buttons are clicked nothing happens, but when i click it a second time or more times then it always works. Does anyone know how i can solve this? Cause i'd expect that if my opacity = 1 that it would just turn to 0.

Then why it doesnt work from the first time?

    const hout = document.getElementById('houtblazers');
    const buttonhout = document.getElementById('button-houtblazers');

    buttonhout.onclick = function () {
      if (hout.style.opacity === "1") {
        hout.style.opacity = "0";
      } else {
        hout.style.opacity = "1";
      }
    };

    const koper = document.getElementById('koperblazers');
    const buttonkoper = document.getElementById('button-koperblazers');

    buttonkoper.onclick = function () {
      if (koper.style.opacity === "1") {
        koper.style.opacity = "0";
      } else {
        koper.style.opacity = "1";
      }
    };

    const snaar = document.getElementById('snaarinstrumenten');
    const buttonsnaar = document.getElementById('button-snaarinstrumenten');

    buttonsnaar.onclick = function () {
      if (snaar.style.opacity === "1") {
        snaar.style.opacity = "0";
      } else {
        snaar.style.opacity = "1";
      }
    };

    const slag = document.getElementById('slagwerk');
    const buttonslag = document.getElementById('button-slagwerk');

    buttonslag.onclick = function () {
      if (slag.style.opacity === "1") {
        slag.style.opacity = "0";
      } else {
        slag.style.opacity = "1";
      }
    };

    body{
      max-height:100%;
      max-width:100%;
      background-image: url(img/galaxy.jpg);
      background-size: cover;
    }
    #partituur{
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      width:100%;
      margin-bottom: 0%;
    }
    #houtblazers, #koperblazers, #snaarinstrumenten, #slagwerk{
      width:75%;
      margin-left: 12.5%;
      opacity: 1;
    }
    #buttons{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .knop{
      width:80%;
      margin-left: 4%;
      display: block;
      cursor:pointer;
    }

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>Muziekvisualisatie</title>
        <link rel="stylesheet" href="index.css">
      </head>
      <body>
        <div id="partituur">
          <img id="houtblazers" src="img/houtblazers.png" alt="">
          <img id="snaarinstrumenten" src="img/snaarinstrumenten.png" alt="">
          <img id="koperblazers" src="img/koperblazers.png" alt="">
          <img id="slagwerk" src="img/slagwerk.png" alt="">
        </div>
        <div id="buttons">
          <img id="button-houtblazers" src="img/knop-houtblazers.png" alt="">
          <img id="button-koperblazers" src="img/knop-koperblazers.png" alt="">
          <img id="button-snaarinstrumenten" src="img/knop-snaarinstrumenten.png" alt="">
          <img id="button-slagwerk" src="img/knop-slagwerk.png" alt="">
        </div>
        <script src="index.js"></script>
        <script src="index2.js"></script>
      </body>
    </html>

CodePudding user response：

The test for opacity in the JS (elem.style.opacity === "1") should read (elem.style.opacity === "0") and set opacity accordingly, that's all. No window.load needed as I commented earlier...

(The picsum photos images will show outside Stackoverflow)

While on it, I simplified your JS somewhat as it had redundant code.

Extra info: Function setOpacity gets passed an element (hout, koper, snaar or slag, the buttons pass the proper element to the function when clicked) and the ternary operator (boolean) ? true-action : false-action does the if..then..else.

const hout  = document.getElementById('houtblazers');
const koper = document.getElementById('koperblazers');
const snaar = document.getElementById('snaarinstrumenten');
const slag  = document.getElementById('slagwerk');

const buttonhout  = document.getElementById('button-houtblazers');
const buttonkoper = document.getElementById('button-koperblazers');
const buttonsnaar = document.getElementById('button-snaarinstrumenten');
const buttonslag  = document.getElementById('button-slagwerk');

function setOpacity(elem) {
/*
    IF..THEN..ELSE using ternary operator
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
*/
    (elem.style.opacity === "0") ? elem.style.opacity = "1" : elem.style.opacity = "0";
};

buttonhout .onclick = function () { setOpacity(hout)  };
buttonkoper.onclick = function () { setOpacity(koper) };
buttonsnaar.onclick = function () { setOpacity(snaar) };
buttonslag .onclick = function () { setOpacity(slag)  };

body{
      max-height:100%;
      max-width:100%;
      background-image: url(img/galaxy.jpg);
      background-size: cover;
    }
    #partituur{
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      width:100%;
      margin-bottom: 0%;
    }
    #houtblazers, #koperblazers, #snaarinstrumenten, #slagwerk{
      width:75%;
      margin-left: 12.5%;
      opacity: 1;
    }
    #buttons{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .knop{
      width:80%;
      margin-left: 4%;
      display: block;
      cursor:pointer;
    }

<div id="partituur">
  <img id="houtblazers" src="https:/picsum.photos/100?random=1" alt="">
  <img id="snaarinstrumenten" src="https:/picsum.photos/100?random=2" alt="">
  <img id="koperblazers" src="https:/picsum.photos/100?random=3" alt="">
  <img id="slagwerk" src="https:/picsum.photos/100?random=4" alt="">
</div>
<div id="buttons">
  <img id="button-houtblazers" src="https:/picsum.photos/32?random=1" alt="">
  <img id="button-koperblazers" src="https:/picsum.photos/32?random=2" alt="">
  <img id="button-snaarinstrumenten" src="https:/picsum.photos/32?random=3" alt="">
  <img id="button-slagwerk" src="https:/picsum.photos/32?random=4" alt="">
</div>

CodePudding user response：

const hout = document.getElementById("houtblazers");
const buttonhout = document.getElementById("button-houtblazers");

buttonhout.addEventListener("click", () => {
  if (hout.style.opacity === "1") {
    hout.style.opacity = "0";
  } else {
    hout.style.opacity = "1";
  }
});

const koper = document.getElementById("koperblazers");
const buttonkoper = document.getElementById("button-koperblazers");

buttonkoper.addEventListener("click", () => {
  if (koper.style.opacity === "1") {
    koper.style.opacity = "0";
  } else {
    koper.style.opacity = "1";
  }
});

const snaar = document.getElementById("snaarinstrumenten");
const buttonsnaar = document.getElementById("button-snaarinstrumenten");

buttonsnaar.addEventListener("click", () => {
  if (snaar.style.opacity === "1") {
    snaar.style.opacity = "0";
  } else {
    snaar.style.opacity = "1";
  }
});

const slag = document.getElementById("slagwerk");
const buttonslag = document.getElementById("button-slagwerk");

buttonslag.addEventListener("click", () => {
  if (slag.style.opacity === "1") {
    slag.style.opacity = "0";
  } else {
    slag.style.opacity = "1";
  }
});

body {
  max-height: 100%;
  max-width: 100%;
  background-image: url(img/galaxy.jpg);
  background-size: cover;
}
#partituur {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  margin-bottom: 0%;
}
#houtblazers,
#koperblazers,
#snaarinstrumenten,
#slagwerk {
  width: 75%;
  margin-left: 12.5%;
  opacity: 1;
}
#buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.knop {
  width: 80%;
  margin-left: 4%;
  display: block;
  cursor: pointer;
}

<div id="partituur">
  <img id="houtblazers" src="img/houtblazers.png" alt="">
  <img id="snaarinstrumenten" src="img/snaarinstrumenten.png" alt="">
  <img id="koperblazers" src="img/koperblazers.png" alt="">
  <img id="slagwerk" src="img/slagwerk.png" alt="">
</div>
<div id="buttons">
  <img id="button-houtblazers"  src="img/knop-houtblazers.png" alt="">
  <img id="button-koperblazers"  src="img/knop-koperblazers.png" alt="">
  <img id="button-snaarinstrumenten"  src="img/knop-snaarinstrumenten.png" alt="">
  <img id="button-slagwerk"  src="img/knop-slagwerk.png" alt="">
</div>