forEach 中的 EventLister 参数需要错误（工具提示）答案

【问题标题】：EventLister arguments required error inside forEach (tooltip)forEach 中的 EventLister 参数需要错误（工具提示）
【发布时间】：2021-02-21 00:27:54
【问题描述】：

我一直在尝试构建一个更简单的基于 JavaScript 的工具提示。经过反复试验和大量搜索，我找到了 Daniel Imms post。

我一直在我的codepen 上处理这个问题。我还有一个earlier codepen，其中包含 Daniel Imms 的原始 JS，并且在控制台中没有显示任何错误。

我更改了结构以使用 forEach 添加事件侦听器并使用箭头函数来尝试使语法高效。不幸的是，我做错了，一开始我没有发现它，因为工具提示部分只适用于 HTML 和 CSS。我仍然需要 Javascript 来控制硬编码的 X Y 位置，但我不希望它跟随光标。我在codepen 中看到的错误是：

TypeError: EventTarget.addEventListener: 至少需要 2 个参数，但只传递了 1 个

和

SyntaxError: 预期的表达式，得到 ')'

非常感谢所有帮助。

还有：

"message": "TypeError: tooltips is undefined",

请看我附上的代码：

var tooltips = document.querySelectorAll('.tooltip span').forEach(item => {
  item.addEventListener('mouseover', event => {
    tooltips.style.top = '40px';
     tooltips.style.left = '80px';   
  })
})

.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

.infobox
{
background: pink;
padding: 0.5%;    
width: 290px;
height: 40px;
display: block;
}

<a class="tooltip">
    <img src="https://raw.githubusercontent.com/j354374/fed-scripting/dfeae751ff2e30ba8963f4676ce6c3b857678992/forms/images/info-circle5.svg" alt="info">
    <span>
      <div class="infobox">TEST</div>
    </span>
</a>


<a class="tooltip">
    <img src="https://raw.githubusercontent.com/j354374/fed-scripting/dfeae751ff2e30ba8963f4676ce6c3b857678992/forms/images/info-circle5.svg" alt="info">
    <span>
      <div class="infobox">TEST2</div>
    </span>
</a>

<a class="tooltip">
    <img src="https://raw.githubusercontent.com/j354374/fed-scripting/dfeae751ff2e30ba8963f4676ce6c3b857678992/forms/images/info-circle5.svg" alt="info">
    <span>
      <div class="infobox">TEST3</div>
    </span>
</a>

【问题讨论】：

标签： javascript foreach mouseevent mouseover

【解决方案1】：

您将forEach 的返回值分配给tooltips，它始终是undefined。

您需要将document.querySelectorAll('.tooltip span') 的值赋给tooltips 变量并按如下方式实现forEach。

var tooltips = document.querySelectorAll('.tooltip span');
tooltips.forEach(item => {
  item.addEventListener('mouseover', event => {
    tooltips.style.top = '40px';
     tooltips.style.left = '80px';   
  })
})

.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

.infobox
{
background: pink;
padding: 0.5%;    
width: 290px;
height: 40px;
display: block;
}

<a class="tooltip">
    <img src="https://raw.githubusercontent.com/j354374/fed-scripting/dfeae751ff2e30ba8963f4676ce6c3b857678992/forms/images/info-circle5.svg" alt="info">
    <span>
      <div class="infobox">TEST</div>
    </span>
</a>


<a class="tooltip">
    <img src="https://raw.githubusercontent.com/j354374/fed-scripting/dfeae751ff2e30ba8963f4676ce6c3b857678992/forms/images/info-circle5.svg" alt="info">
    <span>
      <div class="infobox">TEST2</div>
    </span>
</a>

<a class="tooltip">
    <img src="https://raw.githubusercontent.com/j354374/fed-scripting/dfeae751ff2e30ba8963f4676ce6c3b857678992/forms/images/info-circle5.svg" alt="info">
    <span>
      <div class="infobox">TEST3</div>
    </span>
</a>

【讨论】：