时间戳

首页 > 解决方案 > 有没有办法在 javascript 中制作 onclick 事件函数而不在 html 代码中包含 onclick？

javascript - 有没有办法在 javascript 中制作 onclick 事件函数而不在 html 代码中包含 onclick？

问题描述

我是一个初学者，所以如果我的问题很愚蠢，我很抱歉。

我在 HTML 中有一个无序列表和一个按钮，我想通过 javascript 使按钮显示或隐藏列表，但我试图避免将属性赋予代码onclick中的按钮。HTML

var btn = document.getElementById("button");

btn.onclick = function(){
    
    var ul = document.getElementById("ul");
    if(ul.style.display=='none'){
        ul.style.display='block'}
        else{ul.style.display='none'}  
}
<ul id=ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
    <li>List item 6</li>
</ul>
<input id="button" type="button" name="button" value="press me!" >

我在这里缺少什么，不能让它工作吗？只有当我将onclick属性包含在其中并为其 onclick 事件HTML创建一个函数时才能做到这一点，但从长远来看，这似乎不切实际。showhide()

标签： javascripthtml

解决方案

是的，你使用addEventListener

var btn = document.getElementById("button");

btn.addEventListener('click',function(){
    
    var ul = document.getElementById("ul");
    if(ul.style.display=='none') ul.style.display='block'
    else ul.style.display='none'  
});
<ul id="ul">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
    <li>List item 6</li>
</ul>
<input id="button" type="button" name="button" value="press me!" >

推荐阅读