---
# System prepended metadata

title: 'Web Menu Tutorial '

---

===


````html=0

<!DOCTYPE html>
<html>
<style>
#B {
	background: green;
    color: yellow;
}
</style>
<body>
<h1>數學深淵</h1>
<h2>The onclick Event</h2>

<p>The onclick event triggers a function when an element is clicked on.</p>
<p>Click to trigger a function that will output "Hello World":</p>

<button onclick="myFunction('#A')">A</button>
<button onclick="myFunction('#B')">B</button>
<button onclick="myFunction('#C')">C</button>
<button onclick="myFunction('#D')">D</button>

<div id="A">AA...</div>
<div id="B">BB...</div>
<div id="C">CC...</div>
<div id="D">DD...</div>

<script>
function myFunction(x) {
  ["#A","#B","#C","#D"].map( n=> {
	var result = (x!=n)? "none" : "block"  
    document.querySelector(n).style.display = result;
    })
}
</script>

</body>
</html>
```

## Try it now
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick