form to check if names match display display alert message saying whether they match or the dont mat-CodePudding

Hi guys im trying to make a form which when the user enters two values that are the using an f statement same with an onsubmit event handler. that then shows an alert message if they match. my problem is im not seen onsubmit pop up. or an alert i dont know where im going wrong please help.

function nameCheck(){

    let fname = document.querySelector("#fname").value;
    let fname2= document.querySelector("#fname2").value;

    if (fname1 = = fname2){
       alert("The names match ");

} else if{

    alert("They dont match ");
}
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
    <title> nameCheck</title>

    <script src="java/nameCheck.js" type="text/javascript"></script>

</head>
<body>
 <form action= "">

    Name: <input type="text" id ="fname" name="fname">
     <br><br>
    RenterName: <input type="text" id ="fname2" name="fname2">


    <br>

    <div class = "buttons">
        <input type="submit" onclick()= "nameCheck()" name = "submit"  value="Submit">

        <input type="reset" value="Reset">

    </div>

 </form>
</body>
</html>

CodePudding user response：

Where to begin...

there is no onclick()="" attribute for elements, it's onclick=""
you have a space between = =
there is no fname1 variable defined
you don't have a condition after else if
if you are using alert() just for your own debugging purpose, use console.log() instead, it will save you time in a long run.

CodePudding user response：

Here is the fixed code:

function nameCheck(){

    let fname1 = document.querySelector("#fname").value;
    let fname2= document.querySelector("#fname2").value;

    if (fname1 === fname2){
       alert("The names match ");

} else{

    alert("They dont match ");
}
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
    <title> nameCheck</title>

    <script src="java/nameCheck.js" type="text/javascript"></script>

</head>
<body>
 <form action= "">

    Name: <input type="text" id ="fname" name="fname">
     <br><br>
    RenterName: <input type="text" id ="fname2" name="fname2">


    <br>

    <div class = "buttons">
        


        <input type="reset" value="Reset">
<input type="submit" onclick= "nameCheck()" name = "submit" value = "Submit">
    </div>
 </form>
 
</body>
</html>

Variables

So first, in the if(fname1 = = fname2), and the variable creation, fname and fname1 do not match. Change either one so it matches the other.

`if()` stuff

This is the equality sign: === and you did = =. The space has to be a equal sign.

Also, the else if() is only when you want multiple if()s. else should be used for this program.

HTML Attribute

The onclick() should be onclick.

Variables

if() stuff

HTML Attribute

`if()` stuff