<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
document.addEventListener('DOMContentLoaded', function(){
document.querySelector('#led').addEventListener('click', function(e){
var bt = e.target, f;
while (bt.tagName != 'DIV') {
if(bt.tagName == 'BUTTON') {
f = bt.value ^ 1;
bt.value = f;
bt.innerHTML = ['OFF', 'ON'][f];
return;
}
bt = bt.parentNode;
}
});
});
</script>
</head>
<body>
<div id="led">
<p>30: <button id="LED1" value="0"> OFF </button> <span class="value">...</span></p>
<p>31: <button id="LED2" value="0"> OFF </button> <span class="value">...</span></p>
<p>32: <button id="LED3" value="0"> OFF </button> <span class="value">...</span></p></div>
</body>
</html>