If语句，如果输入中的两个值匹配，则执行某些操作

Question

我想制作一个登录表单，用户必须在其中输入密码"通过"；并确认密码"；pass2"；如果密码不匹配，它应该发出警报"；传球不匹配"；并且如果它们匹配，则应当提醒"；通过匹配"；，我写了这个，但它不起作用：

<form class="forma">
<p>Registruj se</p>
<hr>
<p id="tekst">Napravi svoj nalog. Besplatno je i traje samo minut.</p><br>
<input id="ime" type="text" name="ime" value="Ime:" onfocus="this.value=''">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input id="prezime" type="text" name="prezime" value="Prezime:" onfocus="this.value=''"><br><br>
<input id="email" type="text" name="email" value="Email:" onfocus="this.value=''"><br><br>
<input id="pass" type="text" name="pass" value="Šifra:" onfocus="this.value=''"><br><br>
<input id="pass2" type="text" name="pass2" value="Potvrdi šifru:" onfocus="this.value=''"><br><br>
<input id="dugme" type="button" name="registruj" value="Registruj se">
</form>
<script>
let pass = document.querySelector("#pass input").value;
let pass2 = document.querySelector("#pass2 input").value;
let dugme = document.querySelector("#dugme");
let forma = document.querySelector(".forma");
dugme.addEventListener("click", function() {
if (pass === pass2) {
alert("pass match");
} else {
alert("pass don't match");
}
})
</script>

Answer 1

首先，您只需要选择id，这里的input是多余的

document.querySelector("#pass")

此外，您必须在点击事件处理程序中移动2次getter，以确保它总是获得与匹配的最新密码

let dugme = document.querySelector("#dugme");
let forma = document.querySelector(".forma");
dugme.addEventListener("click", function() {
let pass = document.querySelector("#pass").value;
let pass2 = document.querySelector("#pass2").value;
if (pass === pass2) {
alert("pass match");
} else {
alert("pass don't match");
}
})

<form class="forma">
<p>Registruj se</p>
<hr>
<p id="tekst">Napravi svoj nalog. Besplatno je i traje samo minut.</p><br>
<input id="ime" type="text" name="ime" value="Ime:" onfocus="this.value=''">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input id="prezime" type="text" name="prezime" value="Prezime:" onfocus="this.value=''"><br><br>
<input id="email" type="text" name="email" value="Email:" onfocus="this.value=''"><br><br>
<input id="pass" type="text" name="pass" value="Šifra:" onfocus="this.value=''"><br><br>
<input id="pass2" type="text" name="pass2" value="Potvrdi šifru:" onfocus="this.value=''"><br><br>
<input id="dugme" type="button" name="registruj" value="Registruj se">
</form>

Answer 2

您必须将语句移动到事件侦听器中以获取值，这样您就可以在单击按钮时获取最新的值。查询选择器不正确：

dugme.addEventListener("click", function(){
let pass = document.querySelector("input#pass").value;
let pass2 = document.querySelector("input#pass2").value;

if (pass === pass2) {
alert("pass match");
} else {
alert("pass don't match");
}
});

Answer 3

问题是您使用值键默认方式

<form class="forma">
<p>Registruj se</p>
<hr>
<p id="tekst">Napravi svoj nalog. Besplatno je i traje samo minut.</p>
<br>
<input id="ime" type="text" name="ime" value="Ime:" onfocus="this.value=''">
<input id="prezime" type="text" name="prezime" value="Prezime:" onfocus="this.value=''"><br><br>
<input id="email" type="text" name="email" value="Email:" onfocus="this.value=''"><br><br>
<input id="pass" type="text" name="pass" placeholder="Šifra:" onfocus="this.value=''"><br><br>
<input id="pass2" type="text" name="pass2" placeholder="Potvrdi šifru:" onfocus="this.value=''"><br><br>
<input id="dugme" type="button" name="registruj" value="Registruj se">
</form>
<script>
let dugme = document.querySelector("#dugme");
let forma = document.querySelector(".forma");

dugme.addEventListener("click", function() {
let pass = document.querySelector("#pass").value;
let pass2 = document.querySelector("#pass2").value;
if (pass === pass2) {
alert("pass match");
} else {
alert("pass don't match");
}
})
</script>