document.getElementById 上的 JS 运算符给出了意外的结果

Question

我使用这个 JS 代码没有任何问题：if(document.getElementById('add_calc_srt_gew').value.length != '' &&   document.getElementById('add_calc_dia_inner').value.length != '' &&    document.getElementById('add_calc_dia_out').value.length != '' &&    document.getElementById('add_breedte').value.length != '') {  // do something }我需要再添加一张支票。什么时候add_calc_dia_out大add_calc_dia_inner所以我将 JS 更改为：if(document.getElementById('add_calc_srt_gew').value.length != '' &&    document.getElementById('add_calc_dia_inner').value.length != '' &&    document.getElementById('add_calc_dia_out').value.length != '' &&    document.getElementById('add_breedte').value.length != '' &&   (document.getElementById('add_calc_dia_out').value > document.getElementById('add_calc_dia_inner').value)) {  // do something }但是应该触发的代码没有触发。也没有显示错误。add_calc_dia_out那么确定更大的正确方法是什么add_calc_dia_inner？

Answer 1

这是一个干版本

const num = str => isNaN(str) || str.trim() === "" ? 0 : +str;

const srt_gew = num(document.getElementById('add_calc_srt_gew').value),

    dia_inner = num(document.getElementById('add_calc_dia_inner').value),

      dia_out = num(document.getElementById('add_calc_dia_out').value),

      breedte = num(document.getElementById('add_breedte').value);

if (srt_gew && dia_inner && dia_out && breedte && dia_out > dia_inner) { /* do something */ }

Answer 2

您正在比较字符串中的 2 个数字。它会导致意想不到的行为，如'9'> '11'。你必须先给parseInt()他们。尝试这个：

... && parseInt(document.getElementById('add_calc_dia_out').value) > parseInt(document.getElementById('add_calc_dia_inner').value)) {

此外，您应该在进行比较之前检查它是否是有效数字：

!Number.isNaN(document.getElementById('add_calc_dia_out').value) && !Number.isNaN(document.getElementById('add_calc_dia_inner').value))