Search code examples
javascripthtmlcssdomw3.css

When inputting the correct input, if statement doesn't work with DOM


I was wondering why this doesn't work: when I input "1234" and press the button nothing happens. Can anyone help me with this?

<head>
    <title>Your Website!</title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
    <h1 class="w3-container w3-green w3-center"> | YOUR WEBSITE | </h1>
    <h3 class="w3-aqua w3-spin w3-left">AMAZING</h3>
    <h2 class="w3-green w3-center">Type in "1234"</h2>
    <input id="inputArea"></input>
    <button class="w3-btn w3-red" onclick="pressed()">Try it</button>
    <script>
        function pressed() {
            var i = document.getElementById(inputArea).value;
            if (i = "1234") {
                alert("PASSWORD CORRECT");
            }else {
                alert("PASSWORD INCORRECT");
            }

        }
    </script>
</body>

Solution

  • You forgot to put the input id between ". Here is the working code:

      <head>
        <title>Your Website!</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>
    <body>
        <h1 class="w3-container w3-green w3-center"> | YOUR WEBSITE | </h1>
        <h3 class="w3-aqua w3-spin w3-left">AMAZING</h3>
        <h2 class="w3-green w3-center">Type in "1234"</h2>
        <input id="inputArea"></input>
        <button class="w3-btn w3-red" onclick="pressed()">Try it</button>
        <script>
            function pressed() {
                var i = document.getElementById("inputArea").value;
                if (i = "1234") {
                    alert("PASSWORD CORRECT");
                }else {
                    alert("PASSWORD INCORRECT");
                }
    
            }
        </script>
    </body>