JavaScript 中的按钮未激活/未定义

Question

我向按钮添加了一个事件侦听器并为其分配了一个变量。然而，它并没有发挥作用。控制台一直显示未定义，同时没有代码问题，这使得弄清楚变得很复杂。

这是 html 标记：

<button value="button" id="myBtn">Click to See</button>

这是按钮的 JavaScript 声明，用于在单击时调用函数“action”：

var btn = document.getElementById("myBtn").addEventListener("click", action);

但是控制台显示我没有任何问题，并且仍然显示 btn 未定义。不知道如何解决。

html：

<div>
        <h3>ZooMoji</h3>
        <img src="moji1.jpg" id="pic1">
       <img src="moji2.jpg" id="pic2"> 
       <button value="button" id="myBtn">Click to See</button>
    </div>

JS：

var swap1 = document.getElementById("pic1").src;
var swap2 = document.getElementById("pic2").src;
var btn = document.getElementById("myBtn").addEventListener("click", action);
    
function action() {
   if (swap1.endsWith("moji1.jpg") == true) {
    swap1.src = swap2;
    
   }
   
   
}

Answer 1

这是因为您获得的是

.addEventListner

函数的值，而不是实际的

.getElementById

。 改为执行此操作。

let btn = document.getElementById("myBtn");
btn.addEventListener("click", action);

并且还要废弃那些旧的

var

，如果您希望它是可变的，则在 99.9% 的情况下应将其替换为

const

或

let

。

Answer 2

实际上，事件监听器可以正常工作，只要单击按钮，函数

action

就会被执行，试试这个：

function action() {
  if (swap1.endsWith("moji1.jpg") == true) {
    swap1.src = swap2;
  }

  console.log("the click event is working fine!")
}

btn

变量返回

undefined

的原因是事件监听器本身返回

void

，如果您使用VS Code尝试将鼠标悬停在

btn

变量上，您会看到类似这样的内容:

var btn: void

因此，为了从

HTMLElement

变量中获取

btn

，只需执行以下操作：

var btn = document.getElementById("myBtn"); // returns HTMLElement
btn.addEventListener("click", action); // returns void

function action() {
  if (swap1.endsWith("moji1.jpg") == true) {
    swap1.src = swap2;
  }
}

更多详情：EventTarget.addEventListener()