Home > Software design >  Why is my if() -statement not working here?
Why is my if() -statement not working here?

Time:11-28

I have a simple jquery code here which includes a dialog with two text input fields, "nimi" and "tunnus". Within the dialog is also a "save" button, which is meant to check that the inputted values are 5 characters or longer, before allowing the dialog to close. The issue, however, is that nothing happens after "save" is clicked, aka the program never goes into either of the outcomes of the if() -statement. There is also a button within the dialog, "peruuta", which closes the dialog without making any checks, and it works flawlessly. Why is this, and how can I remedy it?

`

<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></Script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
</head>
<script>
  $(function(){
    $("#registerForm").dialog({
      autoOpen: false,
    });
    $("#register").click(function(){
      $("#registerForm").dialog("open");
    });
    $("#save").click(function(){
      
      if(document.getElementByID("nimi").value.length > 4 && document.getElementByID("tunnus").value.length > 4){
        $("#registerForm").dialog("close");
      }
      else{
        alert("Ei onnistunut");
      }
    });
    $("#peruuta").click(function(){
      $("#registerForm").dialog("close");
    });
  });
</script>
<body>
  <div id="registerForm" title="Rekisteröityminen">
    <p>Nimi:<input type="text" id="nimi"></p><br>
    <p>Tunnus:<input type="text" id="tunnus"></p><br>
    <input type="button" id="save" value="Save"></input><input type="button" id="peruuta" value="Peruuta"></input><br>
  </div>
  
  <input type="button" id="register" value="Rekisteröidy"></input>
</body>

`

I have tried putting the length of the inputs in separate variables and comparing those, which also didn't help. I additionally tinkered around with different comparators and ways to verify the input length in the if() -statement, but so far nothing works.

CodePudding user response:

In addition to the comment by the @Ivar (>> should be >)

I believe that .getElementByID is misspelled it should be .getElementById (notice the lowercase 'd' at the end). You can see the error if you open the developer console.

  • Related