Source Code
<!DOCTYPE html><html>
<head>
<meta charset ="utf-8">
<title>
change html content
</title>
<style>
.box{
background-color: green;
color: white;
height: 400px;
width:400px;
padding: 100px;
font-size: 20px
}
</style>
</head>
<body>
<div class="box" id="bluebox">
<p>
<p>HelpMeOutAlways is a place for learning JavaScript<p>
<button id="button1">Change html content</button>
</p>
<script>
document.getElementById("button1").onclick=function(){
document.getElementById("bluebox").style.width="300px";
document.getElementById("bluebox").style.fontSize="30px";
document.getElementById("bluebox").innerHTML="<p>HelpMeOutAlways is a place for learning JavaScript<p>";
document.getElementById("bluebox").style.color="white";
document.getElementById("bluebox").style.backgroundColor="green";
}
</script>
</div>
</body>
</html>
No comments: