Lab 5 Calling JavaScript Functions Reference: Participation 5.3.1: JavaScript to
ID: 3733705 • Letter: L
Question
Lab 5 Calling JavaScript Functions
Reference: Participation 5.3.1: JavaScript to change colors, lectures. We provide a lot of help during lab and office hours.
Start with the given Lab-5-Start.html page.
You'd need to add four buttons to the page, in between the <h1> and <canvas> elements.
1) Add a button with an onclick event such that when the user clicks the button, the function traverse() runs!
Make it similar to one of the 5.3.1 buttons, just call traverse on the onclik event.
2) Add a button with an onclick event such that when the user clicks the button, the color of the text changes to a random color! Just put the appropriate code that calls the given getRandomColor() function to get the text color and apply it.
3) Add a button with an onclick event such that when the user clicks the button, the color of the page changes to a random color! Just put the appropriate code that calls the getRandomColor() function to get a new color for the background of the document.
5) Add a button with an onclick event handler such that when the user clicks the button the drawOnCanvas function runs and fills the canvas with random circles.
6) For all buttons:
See what the button should display, on the demo below.
Style the buttons (on the head of the page) with a margin top value and a background color.
Put <br> tags after each button, so that it displays on a new line.
Here is the coding file I have now, I got the bee flying as well as the text color changed.
However, I don't know how to change the background color to random, and I don't know why the text color will still change when I click the button for "draw on canvas".
<html>
<head>
<style>
body {text-align:center;}
h1 {margin-top: 10%;}
canvas {margin-top: 10%;}
</style>
<script type="text/javascript">
// Do not touch the code below
var picture="bee.png"
var dy, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var doc_width, doc_height;
doc_width = window.innerWidth-10;
doc_height=window.innerHeight/2;
dy = 0; // set coordinate variables
yp = Math.random()*(doc_height-75); // set position variables
xp = doc_width ; // start from side
am = 10 + Math.random()*7; // set amplitude variables
sty = 0.02 + Math.random()/10; // set step variables
stx = 0.7 + Math.random(); // set step variables
document.write("<div id="dot" +""+ "1" +"; visibility: visible; top: 5px; left: 5px;"><img src=""+picture+"" border="0"></div>");
function traverse(){ // bee animation function *****************
xp -= stx;
if (xp < 10) {
yp = Math.random()*(doc_height-am-75);
xp = doc_width ;
sty = 0.02 + Math.random()/10;
stx = 0.7 + Math.random();
}
dy += sty;
document.getElementById("dot").style.left=xp+"px";
document.getElementById("dot").style.top=yp + am*Math.sin(dy)+"px";
beeTimer=setTimeout("traverse()", 10);
}
function randNum(range) {
return Math.floor(range * Math.random());
}
function getRandomColor(){ // function that returns a color*****
var colors = ["green", "black", "lightblue", "yellow", "magenta", "orange", "lightbrown", "purple", "cyan","red", "sienna", "salmon", "beige", "white"];
var color = colors[randNum(14)];
var x = document.getElementById("textcolor");
x.style.color = color;
return (color);
}
function drawOnCanvas(){ // function to draw on the canvas******
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Draw a circle with function arc.
//ctx.arc(x, y, radius, startAngle, endAngle);
for (var i = 0; i < 150; i++) {
ctx.fillStyle = getRandomColor();
ctx.beginPath();
ctx.arc(randNum(450), randNum(450), randNum(50)+10, 0, 2*Math.PI);
ctx.fill();
ctx.stroke();
}
}
</script>
</head>
<body>
<h1 id="textcolor">Bee traversing the page on a sine wave!!!</h1>
<!-- ADD buttons with onclick event handlers here! -->
<p><button type="button">Make Bee Traverse the Page!</button><br></p>
<p><button type="button">Change Text Color!</button><br></p>
<p><button type="button">Draw Circles on the Canvas!</button><br></p>
<canvas id="myCanvas" width=450 height=450 >
</body>
</html>
Explanation / Answer
I have corrected the code, and below is answer for the issues
Button that calls the traverse function for bee animation works fine and button for changing the text color also works fine.
For changing the backgound of the page i have added a button and some code to get the body element of the page and set its background color to random colors. For this i have altered the getRandomColor method as below
Code
function getRandomColor(controlType){ // function that returns a color*****
var colors = ["green", "black", "lightblue", "yellow", "magenta", "orange", "lightbrown", "purple", "cyan","red", "sienna", "salmon", "beige", "white"];
var color = colors[randNum(14)];
if(controlType == "body")
{
document.body.style.background = color;
}
else if(controlType == "text")
{
var x = document.getElementById("textcolor");
x.style.color = color;
}
else if(controlType == "canvas")
{
return (color);
}
}
If you look the above code i have added the if and else condition that switches based on the parameter controlType value.
When you click the canvas button the background of the text changes because inside the getRandomColor, you are getting the text element id and assigning random color to it
var x = document.getElementById("textcolor");
x.style.color = color;
Now the code have been moved to if condition so that while clicking the draw canvas button the text background will not be change.
The entire code of HTML & Javascript is given below
*************************HTML & JAVASCRIPT*********************
<html>
<head>
<style>
body {text-align:center;}
h1 {margin-top: 10%;}
canvas {margin-top: 10%;}
</style>
<script type="text/javascript">
// Do not touch the code below
var picture="bee.png"
var dy, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var doc_width, doc_height;
doc_width = window.innerWidth-10;
doc_height=window.innerHeight/2;
dy = 0; // set coordinate variables
yp = Math.random()*(doc_height-75); // set position variables
xp = doc_width ; // start from side
am = 10 + Math.random()*7; // set amplitude variables
sty = 0.02 + Math.random()/10; // set step variables
stx = 0.7 + Math.random(); // set step variables
document.write("<div id="dot" +""+ "1" +"; visibility: visible; top: 5px; left: 5px;"><img src=""+picture+"" border="0"></div>");
function traverse(){ // bee animation function *****************
xp -= stx;
if (xp < 10) {
yp = Math.random()*(doc_height-am-75);
xp = doc_width ;
sty = 0.02 + Math.random()/10;
stx = 0.7 + Math.random();
}
dy += sty;
document.getElementById("dot").style.left=xp+"px";
document.getElementById("dot").style.top=yp + am*Math.sin(dy)+"px";
setTimeout("traverse()", 10);
}
function randNum(range) {
return Math.floor(range * Math.random());
}
function getRandomColor(controlType){ // function that returns a color*****
var colors = ["green", "black", "lightblue", "yellow", "magenta", "orange", "lightbrown", "purple", "cyan","red", "sienna", "salmon", "beige", "white"];
var color = colors[randNum(14)];
if(controlType == "body")
{
document.body.style.background = color;
}
else if(controlType == "text")
{
var x = document.getElementById("textcolor");
x.style.color = color;
return (color);
}
else if(controlType == "canvas")
{
return (color);
}
}
function drawOnCanvas(){ // function to draw on the canvas******
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Draw a circle with function arc.
//ctx.arc(x, y, radius, startAngle, endAngle);
for (var i = 0; i < 150; i++) {
ctx.fillStyle = getRandomColor("canvas");
ctx.beginPath();
ctx.arc(randNum(450), randNum(450), randNum(50)+10, 0, 2*Math.PI);
ctx.fill();
ctx.stroke();
}
}
</script>
</head>
<body>
<h1 id="textcolor">Bee traversing the page on a sine wave!!!</h1>
<!-- ADD buttons with onclick event handlers here! -->
<p><button type="button">Make Bee Traverse the Page!</button><br></p>
<p><button type="button">Change Text Color!</button><br></p>
<p><button type="button">Change Background Color!</button><br></p>
<p><button type="button">Draw Circles on the Canvas!</button><br></p>
<canvas id="myCanvas" width=450 height=450 >
</body>
</html>
*****************************END********************************
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.