jQuery对话框中if语句失效问题排查与解决

核心问题 #

你的代码存在JavaScript方法名拼写错误：document.getElementByID() 应为 document.getElementById()（注意最后一个字母是小写d，不是大写D）。

这个错误会导致程序无法获取输入框元素，访问.value属性时会抛出未定义错误，代码执行直接中断，因此save按钮的点击逻辑完全无法运行，既不会关闭对话框，也不会弹出提示。

解决步骤 #

1. 修正方法名：将两处document.getElementByID改为document.getElementById
2. （可选）因项目已引入jQuery，可改用jQuery选择器简化代码，比如$("#nimi").val()获取输入值，更贴合项目风格

修正后的完整代码 #

<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(){
      // 修正拼写错误的原生JS写法
      if(document.getElementById("nimi").value.length > 4 && document.getElementById("tunnus").value.length > 4){
        $("#registerForm").dialog("close");
      }
      else{
        alert("Ei onnistunut");
      }
      // 可选：jQuery风格写法
      // if($("#nimi").val().length >4 && $("#tunnus").val().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 type="button" id="peruuta" value="Peruuta"><br>
  </div>
  
  <input type="button" id="register" value="Rekisteröidy">
</body>

额外修正了两处规范细节：

• <script>闭合标签改为小写（原代码</Script>虽不影响运行，但符合HTML规范写法）
• 按钮为自闭合标签，移除多余的</input>

内容的提问来源于stack exchange，提问作者Niko Puhakainen