#23 JS: HTML DOM Events - Part 1
What is the Event?
“HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document.
Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).”
by W3C School
Example: unfolding/folding a menu
Before: unfold
After: folding
The way I coded:
<!DOCTYPE html>
<html>
<head>
<title>JS - HTML DOM Events - Part 1</title>
<script type="text/javascript">
function toggleMenu(number) { //With the argement, nember, toggleMenu can get the relating list.
var menu=document.getElementById("menu"+number);
menu.classList.toggle("hide"); //toggle is for controlling the "hide" class setting.
/*
if(menu.style.display=="none") {//means that it's hidden now.
menu.style.display=="block";
}
else{//means that it's displaying now.
menu.style.display=="none";
}
menu.innerHTML=""; //innerHTML is a property for us to easily modify the content of an HTML element.
menu.style.fontFamily="Arial";
menu.style.display=none;
*/
}
</script>
<style type="text/css">
.hide{display:none;}
/*With this class selector and the we don't need the if statement above.*/
</style>
</head>
<body style="font-family:Arial">
<div onclick="toggleMenu(1);">Auntie Style</div>
<ul id="menu1">
<li>Beef Noodle</li>
<li>Fried Shrimp Noodle</li>
</ul>
<div onclick="toggleMenu(2);">Uncle Style</div>
<ul id="menu2">
<li>Pork Noodle</li>
<li>Fried Squid Noodle</li>
</ul>
<div onclick="toggleMenu(3);">Grandparents Style</div>
<ul id="menu3">
<li>Happy Noodle</li>
<li>Surprise Noodle</li>
</ul>
</body>
</html>
Music of Today: Crush by Tessa Violet
Like/Share/Follow
Feel free to comment and share your ideas below to learn together!
If you guys find this article helpful, please kindly do the writer a favor — LIKE this article.
【设计+切版30天实作】｜Day18 - Bootstrap的客制化
大纲 上一篇把环境都建立完成後，今天要来做客制化，但在这之前，先来说明一下为什麽要客制化，以及为什麽...
只要有 UGC，就是要花费大把青春跟 Spam 对抗
只要有 UGC (User-generated contents)，就是要花费大把青春跟 Spam ...
用React刻自己的投资Dashboard Day18 - 选单列active style功能
tags: 2021铁人赛 React 上一篇将选单列做出来，并且完成点击上方按钮会跳转至对应页面的...
[Java学习笔记] 使用Builder Pattern 使物件初始化有预设参数
什麽是预设参数? 允许函式在没有传入值的情况下，以指定的预设值初始化。 直观方法 建构子多载 pub...
MySQL 群组函数之基本操作
最近要去当兵，所以在进去前多少学一下资料库。 SELECT COUNT( * ) FROM tabl...