JS How to use one single input value in more functions-CodePudding

This site must do the following things:

I type "MERAVIGLIA" and click on the first button, and the first door must open.
I do the same things with the rest of the WORDS and all the doors must open one after another.

But it doesn't work: the first door opens but the following ones don't. I don't know how to fix it!

Suggestions?

<html>
    <head>
        <title>
            Porta
        </title>
        <style>
            .backDoor
            {
              background-color: rgb(74, 52, 25);
            position:center;
            top:0px;
            left:0px;
            width:250px;
            height:540px;
            margin: 0 auto;
            margin-top:100px;
            }

            .door
            {
            background-color: rgb(74, 52, 25);
            background-image: url(porta.png);
            position:center;
            top:0px;
            left:0px;
            width:250px;
            height:540px;
            margin: 0 auto;
            margin-top:100px;
            
            transform-origin: left;
            /*Speed of the Door animation*/
            transition: all 0.5s ease-in-out;
            }

            .doorOpen
            {
            /*prespectiv creates the door open effect*/
            transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-110deg);
            }

            body {
                background-color: black;
                background-image: url(parete.jpg);
            }

            .door2 {
              background-color: rgb(74, 52, 25);
              background-image: url(porta.png);
              position:center;
            top:0px;
            left:0px;
            width:250px;
            height:540px;
            transform-origin: left;
            margin: 0 auto;
            margin-top:100px;
            /*Speed of the Door animation*/
            transition: all 0.5s ease-in-out;
            }

            .door3 {
              background-color: rgb(74, 52, 25);
              background-image: url(porta.png);
              position:center;
            top:0px;
            left:0px;
            width:250px;
            height:540px;
            transform-origin: left;
            margin: 0 auto;
            margin-top:100px;
            /*Speed of the Door animation*/
            transition: all 0.5s ease-in-out;
            }

            .door4 {
              background-color: rgb(74, 52, 25);
              background-image: url(porta.png);
              position:center;
            top:0px;
            left:0px;
            width:250px;
            height:540px;
            transform-origin: left;
            margin: 0 auto;
            margin-top:100px;
            /*Speed of the Door animation*/
            transition: all 0.5s ease-in-out;
            }

            .door5 {
              background-color: rgb(74, 52, 25);
              background-image: url(porta.png);
              position:center;
            top:0px;
            left:0px;
            width:250px;
            height:540px;
            transform-origin: left;
            margin: 0 auto;
            margin-top:100px;
            /*Speed of the Door animation*/
            transition: all 0.5s ease-in-out;
            }
         </style>
    </head>
    <body>
      <div >
      <div >
        <div >
          <div >
              <div >
                <div >  
            </div>
          </div>
        </div>
      </div>
    </div>
          </div>
          <div>
            <input type="text" id="parola">
          </input>
          <button id="button1" onclick="toggleDoor()">
            Apri prima porta
          </button>
          <button id="button2" onclick="toggleDoor2()">
            Apri seconda porta
          </button>
          <button id="button3" onclick="toggleDoor3()">
            Apri terza porta
          </button>
          <button id="button4" onclick="toggleDoor4()">
            Apri quarta porta
          </button>
          <button id="button5" onclick="toggleDoor5()">
            Apri quinta porta
          </button>
          </div>
          <script>
              var parola=document.getElementById("parola").value;
                  var element = document.querySelector(".door");
           //     element.addEventListener("click", toggleDoor)
                  function toggleDoor() {
                    if(parola=="MERAVIGLIA") {

                  element.classList.toggle("doorOpen");
                  }
                }

                var element2 = document.querySelector(".door2");
           //     element.addEventListener("click", toggleDoor)
                function toggleDoor2() {
                  if(parola=="FIDUCIA") {

                element2.classList.toggle("doorOpen");}
                }

                var element3 = document.querySelector(".door3");
           //     element.addEventListener("click", toggleDoor)
                function toggleDoor3() {
                  if(parola=="ACCOGLIENZA") {
                element3.classList.toggle("doorOpen"); }
                }

                var element4 = document.querySelector(".door4");
           //     element.addEventListener("click", toggleDoor)
                function toggleDoor4() {
                  if(parola=="BUONENOTIZIE") {

                element4.classList.toggle("doorOpen");}
                }

                var element5 = document.querySelector(".door5");
           //     element.addEventListener("click", toggleDoor)
                function toggleDoor5() {
                  if(parola=="CAMMINAREINSIEME") {

                element5.classList.toggle("doorOpen");
                }}
         </script>
    </body>
    <footer>
        
    </footer>
</html>

CodePudding user response：

The problem is that you are getting the value when calling getElementById

var parola=document.getElementById("parola").value;

which happens when the script starts running and the value is still null (input is empty).

you need to remove the .value from there and put it inside the toggleDoor functions. such as :

      function toggleDoor() {
        if (parola.value == "MERAVIGLIA") {
          element.classList.toggle("doorOpen");
        }
      }

your full code would be:

<html>
  <head>
    <title>Porta</title>
    <style>
      .backDoor {
        background-color: rgb(74, 52, 25);
        position: center;
        top: 0px;
        left: 0px;
        width: 250px;
        height: 540px;
        margin: 0 auto;
        margin-top: 100px;
      }

      .door {
        background-color: rgb(74, 52, 25);
        background-image: url(porta.png);
        position: center;
        top: 0px;
        left: 0px;
        width: 250px;
        height: 540px;
        margin: 0 auto;
        margin-top: 100px;

        transform-origin: left;
        /*Speed of the Door animation*/
        transition: all 0.5s ease-in-out;
      }

      .doorOpen {
        /*prespectiv creates the door open effect*/
        transform: perspective(1200px) translateZ(0px) translateX(0px)
          translateY(0px) rotateY(-110deg);
      }

      body {
        background-color: black;
        background-image: url(parete.jpg);
      }

      .door2 {
        background-color: rgb(74, 52, 25);
        background-image: url(porta.png);
        position: center;
        top: 0px;
        left: 0px;
        width: 250px;
        height: 540px;
        transform-origin: left;
        margin: 0 auto;
        margin-top: 100px;
        /*Speed of the Door animation*/
        transition: all 0.5s ease-in-out;
      }

      .door3 {
        background-color: rgb(74, 52, 25);
        background-image: url(porta.png);
        position: center;
        top: 0px;
        left: 0px;
        width: 250px;
        height: 540px;
        transform-origin: left;
        margin: 0 auto;
        margin-top: 100px;
        /*Speed of the Door animation*/
        transition: all 0.5s ease-in-out;
      }

      .door4 {
        background-color: rgb(74, 52, 25);
        background-image: url(porta.png);
        position: center;
        top: 0px;
        left: 0px;
        width: 250px;
        height: 540px;
        transform-origin: left;
        margin: 0 auto;
        margin-top: 100px;
        /*Speed of the Door animation*/
        transition: all 0.5s ease-in-out;
      }

      .door5 {
        background-color: rgb(74, 52, 25);
        background-image: url(porta.png);
        position: center;
        top: 0px;
        left: 0px;
        width: 250px;
        height: 540px;
        transform-origin: left;
        margin: 0 auto;
        margin-top: 100px;
        /*Speed of the Door animation*/
        transition: all 0.5s ease-in-out;
      }
    </style>
  </head>
  <body>
    <div >
      <div >
        <div >
          <div >
            <div >
              <div ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <input type="text" id="parola" />
      <button id="button1" onclick="toggleDoor()">Apri prima porta</button>
      <button id="button2" onclick="toggleDoor2()">Apri seconda porta</button>
      <button id="button3" onclick="toggleDoor3()">Apri terza porta</button>
      <button id="button4" onclick="toggleDoor4()">Apri quarta porta</button>
      <button id="button5" onclick="toggleDoor5()">Apri quinta porta</button>
    </div>
    <script>
      var parola = document.getElementById("parola");
      var element = document.querySelector(".door");
      //  element.addEventListener("click", toggleDoor)
      function toggleDoor() {
        if (parola.value == "MERAVIGLIA") {
          element.classList.toggle("doorOpen");
        }
      }

      var element2 = document.querySelector(".door2");
      //     element.addEventListener("click", toggleDoor)
      function toggleDoor2() {
        if (parola.value == "FIDUCIA") {
          element2.classList.toggle("doorOpen");
        }
      }

      var element3 = document.querySelector(".door3");
      //     element.addEventListener("click", toggleDoor)
      function toggleDoor3() {
        if (parola.value == "ACCOGLIENZA") {
          element3.classList.toggle("doorOpen");
        }
      }

      var element4 = document.querySelector(".door4");
      //     element.addEventListener("click", toggleDoor)
      function toggleDoor4() {
        if (parola.value == "BUONENOTIZIE") {
          element4.classList.toggle("doorOpen");
        }
      }

      var element5 = document.querySelector(".door5");
      //     element.addEventListener("click", toggleDoor)
      function toggleDoor5() {
        if (parola.value == "CAMMINAREINSIEME") {
          element5.classList.toggle("doorOpen");
        }
      }
    </script>
  </body>
  <footer></footer>
</html>

CodePudding user response：

I simplified your code (CSS and JS) somewhat.

I noticed that all .door classes had the same property values. By using [class^="door"] { ... } (select all class attributes starting with 'door') you can simplify the CSS. I left the background-color and background-image in place, assuming you will want to change those per door.
By simply passing a door number to the same function in each button onclick attribute, you can easily use that to construct the Javascript reference to a specific door, check the password and toggle the door.
In the Javascript retrieve the password and check if it exists in a list of passwords and if it belongs to the selected door. (At least, that is how interpreted your original code).

function toggleDoor(door) {
    // Find the proper door
    element = document.querySelector('.door'   door); // With constructed reference

    if (element) { // does the door exist?
        if (checkParola(door)) { // proper password?
            element.classList.toggle("openDoor");
        };
    };
};

// define password list
const parolas = ['MERAVIGLIA','FIDUCIA','ACCOGLIENZA','BUONENOTIZIE','CAMMINAREINSIEME'];

// Check if entered password belongs to selected door
function checkParola(door) {
    // Retrieve the current password entered
    const parola = document.getElementById('parola').value;

    // If the password entered corresponds to the proper door
    if (parola === parolas[door-1]) {
       // [door-1] because array elements start at 0, not 1
       return true;  // Then: okay
    };
    return false;    // Otherwise: nope
}

.backDoor {
    background-color: rgb(74, 52, 25);
    position: center;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 540px;
    margin: 0 auto;
    margin-top: 100px;
}

.openDoor { /* changed from .doorOpen because of below MOD */
    /*prespectiv creates the door open effect*/
    transform: perspective(1200px) translateZ(0px) translateX(0px)
        translateY(0px) rotateY(-110deg);
}

body {
    background-color: black;
    background-image: url(parete.jpg);
}

/* All classes starting with "door" */
[class^="door"] {
    background-color: rgb(74, 52, 25);
    background-image: url(porta.png);
    position: center;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 540px;
    margin: 0 auto;
    margin-top: 100px;

    transform-origin: left;
    /*Speed of the Door animation*/
    transition: all 0.5s ease-in-out;
}

.door1 {/* <= made it .door1 to be consistent */
    background-color: rgb(74, 52, 25);
    background-image: url(porta.png);
}

.door2 {
    background-color: rgb(74, 52, 25);
    background-image: url(porta.png);
}

.door3 {
    background-color: rgb(74, 52, 25);
    background-image: url(porta.png);
}

.door4 {
    background-color: rgb(74, 52, 25);
    background-image: url(porta.png);
}

.door5 {
    background-color: rgb(74, 52, 25);
    background-image: url(porta.png);
}

<div >
    <div >
        <div >
            <div >
                <div >
                    <div >
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div>
    <input type="text" id="parola"></input>

    <button id="button1" onclick="toggleDoor(1)">
        Apri prima porta
    </button>
    <button id="button2" onclick="toggleDoor(2)">
        Apri seconda porta
    </button>
    <button id="button3" onclick="toggleDoor(3)">
        Apri terza porta
    </button>
    <button id="button4" onclick="toggleDoor(4)">
        Apri quarta porta
    </button>
    <button id="button5" onclick="toggleDoor(5)">
        Apri quinta porta
    </button>
</div>
<footer></footer>