Homework SourseCreate a directory your virtual machine Within that director
Create a directory your virtual machine. Within that directory create the html file index.html. This should be an HTML5 formatted file, with the following elements and text defined
Links to an external JavaScript file q2.js in the same directory as index.html.
Contains a button with the text \"ClickMe\" (no quotes) that will invoke the callback function \"go()\" when the button is clicked.
Contains a paragraph with id \"output\" (no quotes) which contains the text \"Change Me\". (no quotes)
When the ClickMe button is pushed, the text in the HTML element with id \"output\" should be updated as follows using JavaScript code in q2.js. (Note: the number given below should reset when the page is reloaded and all effects below are cumulative.)
The first time the button is pushed, the colour of the text in output to be set to red.
The second time the button is pushed, the font of the text in output should be set to \"sans-serif\"
The third time the button is pressed, the text should be changed to five copies of whatever text is currently found as the innerHTML of the output element. Do not add extra spaces or line breaks to this value.
If the button is pushed four or more times, the text in output should be set to \"QUESTION DONE\" (no quotes).
Solution
index.html
<!DOCTYPE html>
<head>
<title>Title</title>
<script type=\"text/javascript\" src=\"q2.js\"></script>
</head>
<body>
<p id=\"output\">Change Me</p> <!--paragraph that is going to be manipulated-->
<button type=\"submit\" id=\"button\" onclick=\"clickme()\">Click Me</button> <!-- called clickme function on click -->
</body>
q2.js
var num_clicks = 0;
function clickme(){
num_clicks = num_clicks + 1;
if (num_clicks==1){
document.getElementById(\"output\").style.color=\"red\"; //change color to red on 1 click
}
else if (num_clicks==2){
document.getElementById(\"output\").style.fontFamily=\"sans-serif\"; //change font family on 2 clicks
}
else if (num_clicks==3){
text = document.getElementById(\"output\").innerHTML;
document.getElementById(\"output\").innerHTML = text + text + text + text + text; //change text on 3 clicks
}
else if (num_clicks>=4){
document.getElementById(\"output\").innerHTML = \"QUESTION DONE\"; //question done text on 4 clicks
}
}
