JavaScript中如何在addEventListener内添加函数及相关代码问题排查

1. 如何在addEventListener中添加函数？ #

在JavaScript里给addEventListener绑定函数有几种常用方式，你可以根据场景选择：

• 匿名函数直接传入：适合逻辑简单、不需要复用的场景，写法直观：

  const myButton = document.getElementById('myBtn');
  myButton.addEventListener('click', function() {
    console.log('按钮被点击啦！');
  });
  

• 传入命名函数引用：如果点击逻辑复杂或需要复用，直接传函数名即可（注意别加括号，加括号会让函数立即执行而非点击时执行）：

  function handleButtonClick() {
    console.log('按钮被点击啦！');
  }
  const myButton = document.getElementById('myBtn');
  myButton.addEventListener('click', handleButtonClick);
  

• 箭头函数简写：ES6之后的简洁写法，和匿名函数效果一致：

  const myButton = document.getElementById('myBtn');
  myButton.addEventListener('click', () => {
    console.log('按钮被点击啦！');
  });
  

小提醒：如果之后需要移除事件监听，必须使用命名函数的引用，匿名函数和箭头函数无法被移除，因为没法指定要移除的具体函数。

2. 解决点击按钮时只读取初始值的问题 #

先帮你拆解代码里的核心问题：你在页面加载时就把nombre赋值为span的内容，这个变量会变成固定值，之后不管页面元素内容怎么变化，它都不会自动更新。另外你描述里说要读取id="dollar"的p元素值，但代码里判断的是nombre，大概率是笔误，不过核心问题都是变量初始化时机错误。

修复后的代码 #

<div> 
  <p id="dollar">1000</p> 
  <input type="range" min="0" max="40000" step="100" value="0" oninput="showDollar(this.value)" onchange="showDollar(this.value)"> 
</div> 
<button id="bouton">OBTENER CREDITO</button> 
<script type="text/javascript"> 
  const bouton = document.getElementById('bouton'); 

  function showDollar(newDollar){ 
    document.getElementById('dollar').innerHTML = newDollar; 
  } 

  bouton.addEventListener("click", function(){ 
    // 关键：点击按钮时才获取最新的dollar值，并转换为数字
    const currentDollarValue = Number(document.getElementById('dollar').innerHTML);
    
    // 这里根据你的需求替换成实际要比较的变量即可
    if(currentDollarValue < 750){ 
      location.href = "https://www.google.com"; 
    } else{ 
      location.href = "https://www.youtube.com"; 
    } 
  }); 
</script>

核心修改点 #

1. 延迟获取值的时机：把获取dollar元素值的代码移到点击事件回调内部，这样每次点击都会读取页面上的最新数值，而非一开始就固定下来。
2. 字符串转数字：用Number()把innerHTML返回的字符串转为数字，避免字符串比较的坑——比如字符串"1000"和"750"比较时，会因第一个字符'1' < '7'错误判断为"1000" < "750"，这不符合数字比较逻辑。

如果你的需求确实是判断nombre（某个span元素的值），只需把获取nombre的代码移到点击事件内部，同样转成数字再比较即可。

内容的提问来源于stack exchange，提问作者Reezy Comoriano