为什么 onClick 事件在下面的代码中不起作用？ [复制]答案

【问题标题】：Why does the onClick event is not working in the code below? [duplicate]为什么 onClick 事件在下面的代码中不起作用？ [复制]
【发布时间】：2020-09-06 13:56:46
【问题描述】：

大家好，

我不知道为什么 onClick 事件不起作用。我试图将脚本放在 head 标记中，在一个单独的 js 文件中，尝试使用 jQuery 来执行操作......没有任何效果。

如果有更多经验的人可以解释以下代码可能存在的问题，我将不胜感激。

提前感谢您的宝贵时间！

<!DOCTYPE html>
<html>
<body>

    <span class="position">Text to be changed when Facbook Icon is clicked</span>
    
    <ul class="social">
        <li><span onclick="alert()"><i class="icon-facebook2"></i></span></li>
        <li><i class="icon-instagram"></i></li>
        <li><i class="icon-github"></i></li>
        <li><i class="icon-linkedin2"></i></li>
    </ul>


<script type="text/javascript">
        function alert(){
            document.getElementsByClassName("position").innerHTML = "Text is now changed";   
        };
    </script>

</body>
</html>

【问题讨论】：

你需要使用document.querySelector(".position").innerHTML = "Text is now changed";

标签： javascript onclick innerhtml

【解决方案1】：

document.getElementsByClassName("position").innerHTML不行，必须是一个元素，像这样document.getElementsByClassName("position")[0].innerHTML

function alert(){
document.getElementsByClassName("position")[0].innerHTML="it works";
}

<button onclick="alert()">ok</button>
<div class="position"></div>

此代码选择类position 的第一个元素并将新文本放入innerHTML 中

【讨论】：

谢谢你，约翰·多伊！非常感激。建议的代码修改有效。
不客气 :) PS：如果您有多个具有相同类的元素要在其上使用 addEventListener，则必须使用 for 循环 document.getElementsByClassName("position")[i] 另外，正如其他人所建议的，你不应该将你的函数命名为alert

【解决方案2】：

首先不要使用 alert 作为函数的名称。 JavaScript 中有一个名为 alert("Some text") 的原生函数，它会在您的浏览器中创建一个模态框，这可能会导致问题！

此外，document.getElementsByClassName() 返回 Array，而不是单个元素，因为 class 不像 Id 那样是唯一属性。

你可以试试这个：

<!DOCTYPE html>
<html>
<body>

    <span class="position">Text to be changed when Facbook Icon is clicked</span>
    
    <ul class="social">
        <li><span onclick="showAlert()"><i class="icon-facebook2"></i></span></li>
        <li><i class="icon-instagram"></i></li>
        <li><i class="icon-github"></i></li>
        <li><i class="icon-linkedin2"></i></li>
    </ul>


    <script type="text/javascript">
        function showAlert() {
            document.getElementsByClassName("position")[0].innerHTML = "Text is now changed";   
        };
    </script>

</body>
</html>

【讨论】：

谢谢你，RadekDeveloper！我不知道返回类型是 Array 但现在你提到了，这是有道理的。除了解决问题，还学到了一些新东西。非常感谢！

【解决方案3】：

你不能命名你的函数 alert 因为它是一个窗口方法https://www.w3schools.com/jsref/met_win_alert.asp 您必须使用查询选择器在脚本中选择您的元素，因为您没有给它一个 id 由类选择它然后添加事件侦听器，然后分配一个函数。

document.querySelector('.icon-facebook2').addEventListener('click', function() {
   return alert('Your message')
})

【讨论】：

谢谢你，Premo89！我已经从项目中提取了麻烦的代码，并在简化它时为函数选择了一个通用名称（ alert() ）。尽管如此，您的评论使我更加了解特定方面。非常感谢！