Kaigai Blog living abroad in my twenties

【My Study Load】JAVASCRIPT CODING

JavaScript Programming

JAVASCRIPT CODING

Add the “addEventListener” to the plural elements

<div>
    <h5>Confirm Password</h5>
    <input class="input four" type="password" name="password2" required
        <?php if (isset($_SESSION['input-password'])) { 
            $input_password = $_SESSION['input-password']; ?>
            value=<?php echo $input_password ?>
        <?php } ?>
    >
    <i class="fa fa-eye password_open focus" id="hello" aria-hidden="true"></i>
    <i class="fa fa-eye-slash password_closed" aria-hidden="true"></i>
</div> 
<script>
    const password_open = document.querySelectorAll(".password_open");
    const password_closed = document.querySelectorAll(".password_closed");
    password_open.forEach(password => password.addEventListener("click", ()=> {
        password.classList.remove('focus');
        password.parentNode.lastElementChild.classList.add("focus");
    }));
    password_closed.forEach(password => password.addEventListener("click", ()=> {
    password.classList.remove('focus');
    password.parentNode.children[2].classList.add("focus");
    }));
</script>

Change the visibility of the password field

<!-- Password field -->
Password: <input type="password" value="FakePSW" id="myInput">
<!-- An element to toggle between password visibility -->
<input type="checkbox" onclick="myFunction()">Show Password
<script>
    function myFunction() {
        var x = document.getElementById("myInput");
        if (x.type === "password") {
            x.type = "text";
        } else {
            x.type = "password";
        }
    }
</script>