使用querySelector和addEventListener对页面的最后一个元素进行操作

Question

我试图检查密码的安全级别，并将字段边框设置为绿色或红色(取决于条件的尊重)。我成功了，但是JavaScript只选择第一个字段(昵称字段)，而我想选择最后一个字段。我试过各种各样的东西，但都没有用。有谁可以帮我？

以下是HTML代码：

...

<label for="pseudo">Rentrez un pseudo </label>
<input type="text" id="pseudo"> 

<label for="pseudo">Rentrez un mdp</label>
<input type="password" id="mdp">

<script src="js/verif_filed.js"></script>

...

而js代码：

const validationInput = document.querySelector("input");

const cara_nbr = Array.from("0123456789");
const cara_lower = Array.from("abcdefghijklmnopqrstuvwxyz");
const cara_upper = Array.from("ABCDEFGHIJKLMNOPQRSTUVWXYZ");

validationInput.addEventListener('input', (element) => {
    let have_nbr = false;
    let have_spetial = false
    let have_lower = false;
    let have_upper = false;
    for (let i of element.target.value) {
        if (cara_nbr.includes(i)) {have_nbr = true;}
        if (cara_lower.includes(i)) {have_lower = true;}
        if (cara_upper.includes(i)) {have_upper = true;}
        if (!(cara_nbr.includes(i) || cara_lower.includes(i) || cara_upper.includes(i))){
        have_spetial = true;
    }
}

if (element.target.value.length >= 8 && have_nbr == true && have_spetial && have_lower == true && have_upper == true) {
    validationInput.style.borderColor = "green";
}
else {
    validationInput.style.borderColor = "red";
    console.log(e.target.value)
    console.log(have_nbr, have_lower, have_upper)
}

Answer 1

您可以按其id选择最后一个<input>元素。

const validationInput = document.querySelector("input#mdp");
// or
const validationInput = document.getElementById("mdp");

Answer 2

您需要使用querySelectorAll，然后循环遍历以下元素：

const validationInputs = document.querySelectorAll("input"); // returns an array

循环：

validationInputs.forEach(input => {
    input.addEventListener('input', (element) => {
        let have_nbr = false;
        let have_spetial = false
        let have_lower = false;
        let have_upper = false;
        for (let i of element.target.value) {
            if (cara_nbr.includes(i)) {have_nbr = true;}
            if (cara_lower.includes(i)) {have_lower = true;}
            if (cara_upper.includes(i)) {have_upper = true;}
            if (!(cara_nbr.includes(i) || cara_lower.includes(i) || cara_upper.includes(i))){
                have_spetial = true;
            }
        }
    }
}