Question

我想在单击按钮后将一个类添加到按钮以制作小动画。目前，我有问题，我收到以下信息：

未捕获的TypeError：无法读取未定义的属性'add'

我无法添加新课程，有人可以帮助我吗？

function animateClick(ID) {
  var elmnt = document.getElementById(ID);
  var todo = this;
  todo.classList.add("rotate");
  setTimeout(
    function() {
      elmnt.scrollIntoView({
        behavior: 'smooth'
      });
    }, 500
  );
}

<div class="nav-icons-img">
  <button onclick="animateClick('welcome')">
    <img src="data:image/svg+xml;utf..." />
    <span class="tooltiptext1">
     Welcome Text
    </span>
  </button>
</div>

Answer 1

您可以使用addEventListener代替onclick，因为单独的逻辑是一种好习惯。您可以通过发送this作为参数来明确指示按钮。

function animateClick(ID, btn) {
var elmnt = document.getElementById(ID);
var todo = btn;
todo.classList.add("rotate");
setTimeout(
    function() {
        elmnt.scrollIntoView({behavior: 'smooth'});
    }, 500
);}

<div class="nav-icons-img">
 <button onclick="animateClick('welcome', this)">
  <img src="data:image/svg+xml;utf..." />
    <span class="tooltiptext1">
     Welcome Text
    </span>
   </button>
</div>

Answer 2

正如许多人所说，待办事项（this）并不是您想的那样。除非在event listener中，否则DOM中函数中的this是指窗口对象。您可能以为这意味着要素。这是因为计算机不知道您将要在元素的onclick属性中调用该函数。有两种解决方法。

您可以像这样传递this作为第二个参数todo的参数

这是this小提琴中的代码。

window.animateClick = function(ID, todo) {
console.log(todo);
var elmnt = document.getElementById(ID);
todo.classList.add("rotate");
setTimeout(function() {
  elmnt.scrollIntoView({
      behavior: 'smooth'
    });
  }, 500);
}

或者，您可以创建一个event listener method而不是使用onclick属性

遵循以下格式：

element.addEventListener("click", function() {
    var todo = this;
    ....
});

最后，您应该能够添加一个新类，但是在您给我们的代码中，没有包含id为welcome的元素，因此将其添加为null会添加一个id为welcome的元素，它将起作用。

将类别添加到按钮

2 个答案: