Question 41218 in PHP Question posted in
Official manual can be found here.

JS How to use one single input value in more functions – PHP

This site must do the following things:

  1. I type "MERAVIGLIA" and click on the first button, and the first door must open.
  2. 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 class="backDoor">
      <div class="door5">
        <div class="door4">
          <div class="door3">
              <div class="door2">
                <div class="door">  
            </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>
Tags:

2

Answers


  1. 0

    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 class="backDoor">
      <div class="door5">
        <div class="door4">
          <div class="door3">
            <div class="door2">
              <div class="door"></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>
    Login or Signup to reply.
  2. 0

    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 class="backDoor">
    <div class="door5">
        <div class="door4">
            <div class="door3">
                <div class="door2">
                    <div class="door1">
                    </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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search