Here is my code:
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="C:\Users\gyld2\Documents\dropdown menu\dropdown.css">
</head>
<body>
<script type="text/javascript" src="C:\Users\gyld2\Documents\dropdown menu\dropdown.js"></script>
<button id="btn">Click Here</button>
<ul id="list">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</body>
</html>
JS:
const button = document.getElementById("btn");
const list = document.getElementById("list");
list.style.display = "none";
button.addEventListener("click",(event)=> {
if (list.style.display == "none") {
list.style.display = "block";
else {
list.style.display = "none";
}
}
})
and i want it to be something like this:
Typo Error
if (list.style.display == "none") {
list.style.display = "block";
}
else {
list.style.display = "none";
}
const button = document.getElementById("btn");
const list = document.getElementById("list");
list.style.display = "none";
button.addEventListener("click",(event)=> {
if (list.style.display == "none") {
list.style.display = "block";
}
else {
list.style.display = "none";
}
})<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn">Click Here</button>
<ul id="list">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</body>
</html>