JS实现两输入值大小比较时if else判断结果相反是什么原因

你的代码运行结果和预期不符，是几处明确的逻辑错误导致的：

• 元素匹配错误：HTML中提交按钮的id是enviar，但JS里通过document.getElementById('send')查找按钮，根本选不到目标元素，点击事件一开始就没有成功绑定。
• 比较对象完全错误：你保存的texto、texto2变量是整个输入框的DOM节点对象，不是用户输入的内容，直接比较两个DOM对象的结果和输入的数值没有任何关系。
• 类型未做转换：就算正确读取到输入框内容，输入框的.value属性返回的是字符串类型，直接用比较运算符对比时，会按照字符串的字典序逐字符判断大小，不是按数值规则计算，比如输入10和2，字符串比较会判定"10" < "2"，结果完全错误。
• 分支逻辑缺失：原代码的if/else分支没有覆盖两个数值相等的场景，会误把相等的情况判定为输入2更大。

<!-- HTML部分 -->
<input type="text" id="texto">
<input type="text" id="texto2">
<!-- 按钮id和JS选择器保持一致，用type="button"避免默认提交刷新页面 -->
<button type="button" id="enviar">Enviar</button>

// JS部分
const texto = document.getElementById('texto');
const texto2 = document.getElementById('texto2');
// 修正按钮id匹配问题
const send = document.getElementById('enviar');
send.addEventListener('click', mayorque)

function mayorque() {
  // 读取输入值、去除首尾空格后转成数值类型
  const val1 = Number(texto.value.trim());
  const val2 = Number(texto2.value.trim());

  // 增加非法输入校验
  if (isNaN(val1) || isNaN(val2)) {
    alert('请在两个输入框中输入有效数字');
    return;
  }

  if (val1 > val2){
    alert('Input 1 is greater than input 2')
  } else if (val1 < val2) {
    alert('Input 2 is greater than input 1')
  } else {
    alert('两个输入的数值相等')
  }
}

内容的提问来源于stack exchange，提问作者Andres Dominguez