为什么这个JS自调用函数不起作用？
[英]Why doesn't this JS self-invoked function work?
问题描述
I'm trying to use an auto self-invoked functions to open and close the menu but it doesn't work. 
我正在尝试使用自动调用功能来打开和关闭菜单，但是它不起作用。
I rely on examples I saw about self-invoked functions but now I don't know what's wrong. 我依靠我看到的有关自调用函数的示例，但是现在我不知道出了什么问题。
I tried different syntax to call the function, but nothing worked but everything worked when I Call the funtion using "onclick=function name", so I guess that the problem is on the self-invoked function. 我尝试了不同的语法来调用该函数，但是当我使用“ onclick =函数名”调用该功能时，什么都没有起作用，但是一切都起作用了，所以我想问题出在自调用函数上。
<body>
<nav class="navbar">
<span class="open-slide" >
<a href="#">
<img src="img/menu.png" id="btn-open">
</a>
</span>
<h1 id="t1">Innova<span id="t2">TEK</span> </h1>
</nav>
<div id="side-menu" class="side-nav">
<a href="#" class="btn-close">
<img src="img/back.png" alt="" id="btn-close"></a>
<a href="#"><img i class = "menu"src="img/home.png" alt=""> Home</a>
<a href="#"> <img src="img/about.png" class = "menu" alt=""> About</a>
<a href="#"><img src="img/support.png" alt=""> Services</a>
<a href="#"> <img src="img/contact.png" alt=""> Contact</a>
</div>
<div id="main">
<h1>Responsive Side Menu</h1>
</div>
(function(){
show();
hide();
});
function show(){
document.getElementById("btn-open").addEventListener('click', menuShow());
}
function hide(){
document.getElementById("btn-close").addEventListener("click", menuHide());
}
function menuShow(){
document.getElementById('side-menu').style.width = '17%';
document.getElementById('main').style.marginLeft = '17%';
}
function menuHide(){
document.getElementById('side-menu').style.width = '0';
document.getElementById('main').style.marginLeft = '0';
}
2 个解决方案
解决方案1
2 已采纳 2019-08-24 02:23:28
You are missing the () at the end of the IIFE without which the function will not call itself. 您会在IIFE末尾缺少() ，否则该函数将不会自行调用。 Also you should have passed the function reference to the event listeners and not a function call. 同样，您应该将函数引用传递给事件侦听器，而不是函数调用。
Here is working code, I added some css for the btn-close so we can see it for testing. 这是工作代码，我为btn-close添加了一些css ，以便我们进行测试。
(function(){ show(); hide(); })(); // <--- were missing the () here function show(){ document.getElementById("btn-open").addEventListener('click', menuShow); } function hide(){ document.getElementById("btn-close").addEventListener("click", menuHide); } function menuShow(){ document.getElementById('side-menu').style.width = '17%'; document.getElementById('main').style.marginLeft = '17%'; } function menuHide(){ document.getElementById('side-menu').style.width = '0'; document.getElementById('main').style.marginLeft = '0'; }
#btn-close { position:relative; float:left; height:20px; width: 20px; border: 1px solid #f00; }
<nav class="navbar"> <span class="open-slide" > <a href="#"> <img src="img/menu.png" id="btn-open"> </a> </span> <h1 id="t1">Innova<span id="t2">TEK</span> </h1> </nav> <div id="side-menu" class="side-nav"> <a href="#" class="btn-close"> <img src="img/back.png" alt="" id="btn-close"></a> <br style="clear:both" /> <a href="#"><img i class = "menu"src="img/home.png" alt=""> Home</a> <a href="#"> <img src="img/about.png" class = "menu" alt=""> About</a> <a href="#"><img src="img/support.png" alt=""> Services</a> <a href="#"> <img src="img/contact.png" alt=""> Contact</a> </div> <div id="main"> <h1>Responsive Side Menu</h1> </div>
解决方案2
0 2019-08-24 02:13:55
friend, the functions with addEventListener should not have the parentheses to be invoked, just delete the parentheses 朋友，具有addEventListener的函数不应具有要调用的括号，而只需删除括号
answer it is: 答案是：
document.getElementById("btn-open").addEventListener('click', menuShow );
document.getElementById("btn-close").addEventListener('click', menuHide );
function menuShow(){
document.getElementById('side-menu').style.width = '17%';
document.getElementById('main').style.marginLeft = '17%';
}
function menuHide(){
document.getElementById('side-menu').style.width = '0';
document.getElementById('main').style.marginLeft = '0';
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.