如何解决为什么onClick事件在下面的代码中不起作用?
欢迎大家
我不知道为什么onClick事件不起作用。我试图将脚本放在单独的js文件中的head标签中,试图使用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.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
首先,不要使用 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>
,
您无法命名函数警报,因为它是一种窗口方法https://www.w3schools.com/jsref/met_win_alert.asp 您必须使用查询选择器在脚本中选择元素,因为您没有给它提供ID,而是由类选择它,然后添加事件侦听器,然后分配一个函数。
document.querySelector('.icon-facebook2').addEventListener('click',function() {
return alert('Your message')
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。