表单内JS按钮点击无响应问题排查

核心错误点 #

• 输入值获取方式错误：代码中parseInt("#wortanzahl".value)是完全错误的写法——"#wortanzahl"只是字符串，并非DOM对象，无法直接读取value属性。正确的做法是用jQuery选择器定位元素后调用.val()方法：

  // 错误写法
  parseInt("#wortanzahl".value)
  // 正确写法
  parseInt($("#wortanzahl").val(), 10)
  

  另外，parseInt建议加上第二个参数（这里填10表示十进制），避免非预期的进制转换问题。

• 按钮默认类型隐患：表单内的<button>元素默认类型为submit，如果JS代码执行出错（比如上面的取值错误导致代码中断），就会触发表单提交、页面刷新，看起来按钮点击无反应。建议显式设置按钮类型为button：

  <button type="button" class="btn btn-success mt-3" id="weiter">Aktualisieren</button>
  

其他潜在问题 #

• 目标元素不存在：如果页面中没有id="wortanzahl"或id="wk"的元素，代码执行时会抛出错误，导致后续逻辑无法运行，需确保这些元素存在且ID正确。
• 输入值非有效数字：如果wortanzahl的输入值不是有效数字，parseInt会返回NaN，而NaN > 0的结果为false，因此不会执行alert和启用按钮的逻辑。可以添加合法性判断：

  const wortanzahlVal = parseInt($("#wortanzahl").val(), 10);
  if (!isNaN(wortanzahlVal) && wortanzahlVal > 0) {
    // 执行后续逻辑
  }
  

修复后的完整JS代码 #

$(document).ready(function () {

  $('.onlynumbers').keypress(function (e) {
    var charCode = (e.which) ? e.which : event.keyCode    
    if (String.fromCharCode(charCode).match(/[^0-9]/g))    
      return false;
  }); 

  $("#weiter").click(function(event) {
    const wortanzahlVal = parseInt($("#wortanzahl").val(), 10);
    if (!isNaN(wortanzahlVal) && wortanzahlVal > 0){
      $("#wk").attr("disabled", false);
      alert ("Test");
    } 
    event.preventDefault();
  })
});

内容的提问来源于stack exchange，提问作者Christian Türling