Untitled

<!DOCTYPE html>
<html>
<head>
<style>
.box{display:inline-block;width:150px;height:100px;background:red;margin:20px;}
button{width:80px;height:15px;background:yellow;border:none;border-radius:10px;cursor:pointer;margin:0 50px;}
</style>
</head>
<body>
<p id="1">HTML‑CSS‑JAVASCRIPT</p>
<button onclick="document.getElementById('1').innerHTML='Hello'">Click Me!</button>
<p id="2">Delos Reyes Dongsal</p>
<button onclick="document.getElementById('2').innerHTML='20 20'">Click Me!</button>
<br>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<br>
<button onclick="green1()">Click</button>
<button onclick="green2()">Click</button>
<button onclick="green3()">Click</button>
<script>
function green1(){document.getElementById("box1").style.backgroundColor="green";}
function green2(){document.getElementById("box2").style.backgroundColor="green";}
function green3(){document.getElementById("box3").style.backgroundColor="green";}
</script>
</body>
</html>