<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1>Change Things I</h1> <div id="d1"> Hello </div> <div id="d2"> Goodbye </div> <p> <input type="button" value="color Change" onclick="changecolor()"> </p> <p> <input type="button" value="text Change" onclick="changetext()"> </p>

div{ width :200px; font-size :28px; margin:20px; } /* #d1{ background-color : lightblue; } #d2{ background-color : red; } */ .yellowback{ background-color :yellow; } .blueback{ background-color :lightblue; }

function dochange(){ alert('cliced button by js function'); } function changecolor(){ var dd1=document.getElementById("d1"); var dd2=document.getElementById("d2"); dd1.className="blueback"; dd2.className="yellowback"; } function changetext(){ var dd1=document.getElementById("d1"); var dd2=document.getElementById("d2"); dd1.innerHTML="Bonjour"; dd2.innerHTML="Mohamed"; }