JavaScript Internal Scripting Body Example

<!DOCTYPE html>
<html>
<head>
<base href="https://www.tutsinsider.com/">
<title>JavaScript Internal Scripting Tutorial - TutsInsider</title>
<style>
  .main{
    padding: 10px;
  } 
  .main-heading{
    background: #333333;
    color: #ffffff;
    padding: 20px;
  }
  .main-paragraph{
    margin-top: -20px;
    padding: 20px;
    box-shadow: inset 0 0 3px 0 #2a73cc;
  }
  .main-button{
    padding: 5px 10px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    background: #333333;
    color: #ffffff;
    box-shadow: 0 0 3px 0 #333333;
    cursor: pointer;
  }
</style>
</head>
<body>
  
<div class="main">
<h2 class="main-heading" id="main-heading">What is JavaScript Internal Scripting?</h2>
<div class="main-paragraph" id="main-para">
<p>We can include JavaScript in a web page by <a href="https://www.tutsinsider.com/javascript/javascript-how-to/">three methods</a>, and internal or onpage scripting is the second method.</p>
<h3>Click the Button to Change Background</h3>

<button onclick="changeColor()" class="main-button" id="main-btn">Change Color</button>

</div>
</div>

<script>
function changeColor() {
	var heading = document.getElementById("main-heading");
	heading.style.backgroundColor = "darkred";
	var para = document.getElementById("main-para");
	para.style.backgroundColor = "yellow";
	para.style.color = "black";
	var btn = document.getElementById("main-btn");
	btn.style.backgroundColor = "darkred";
}
</script>
</body>
</html>