JSFiddle - React, Tailwind, and code Playground

by Rainer Plumer

HTML

<body>
<div id="main_container" style="background-color:#3B7AF0;width:1800px;height:1800px;font-size:10pt">

<img id="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSL2CuC1sDp7s3Z0kL-0k1rcrgw8MpNJV7L4HPw-Ez9YOcqokjsyCZqBqbv" width:40px height:40px></img>

<div id="Scriptarea">                          <!-- Javascript stuff -->
<form>
<input type="button" id="changeimg" onclick="javascript:changeimage()" value="click here to change garfield"></input>
<input id="colorbtn" type="button" onclick="changeDivColor()" value="Change DIV color"></input>
</form>
</div>                                 <!-- Javascript stuff -->


</div>

</body>

JavaScript

var imgUrl = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSL2CuC1sDp7s3Z0kL-0k1rcrgw8MpNJV7L4HPw-Ez9YOcqokjsyCZqBqbv";
var imgUrl2 = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRtZsHc2xA0fazpA-zx79WaGWx_Enn0SV9DaaPc1N-jA5IxgSwF79W0g5_1";
function changeDivColor() {
    $("#main_container").css("background-color",'red');
}
function changeimage() {
   var img = $("#image"), url = imgUrl;
    if (img.attr("src") == imgUrl) {url = imgUrl2;}
    img.attr("src", url);
}
$("#changeimg").click(changeimage);
$("#colorbtn").click(changeDivColor);