(JAVASCRIPT) <?xml version=\"1.0\" encoding=\"utf-8\"?> <!DOCTYPE html PUBLIC \"
ID: 3917432 • Letter: #
Question
(JAVASCRIPT)
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
<title>JavaScript Example</title>
<style type="text/css">
#box {
width: 50px;
height: 50px;
border: 1px solid;
background-color: blue;
}
</style>
<script type="text/javascript">
<!--
counter=0;
function move_it()
{
var px = divObj.style.left;
px = parseInt(px);
px++;
divObj.style.left = px + "px";
while(counter++<200)
{setTimeout("move_it()",20);}
}
function start()
{
divObj = document.getElementById("box");
divObj.style.position="absolute";
divObj.style.left="10px";
divObj.style.top="10px";
move_it();
}
//-->
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
This is what I have so far.
I need help with the following tasks.
Task 2
Notice that the box keeps moving forever. (Note the horizontal scroll bar on the bottom of the web page that appears if you let the script run.) Devise a way to move the box only 200 times. Hint: Create a counter that counts how many times move_it has been called. This counter should be a global variable. Only execute the setTimeout("move_it", 20); line if the counter is less than 200.
Task 3
Let's do something more complicated. Let's move the box in a controlled way. Write code that first moves the box to the right 400 pixels then down 400 pixels and then left 400 pixels and finally up 400 pixels. Hint: Keep a global variable that keeps track of how many times move_it has been called. Then depending on what the value of the counter is you move the box accordingly. Recall that when using CSS to position an element you specify left and top off sets. That is, you specify how many pixels to the right from the left edge the element should be moved and top specifies how many pixels down the image should be moved from the top edge.
Explanation / Answer
Given below is the modified code according to the question.
Please do rate the answer if it was helpful. Thank you
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
<title>JavaScript Example</title>
<style type="text/css">
#box {
width: 50px;
height: 50px;
border: 1px solid;
background-color: blue;
}
</style>
<script type="text/javascript">
<!--
counter=0;
function move_it()
{
var px = divObj.style.left;
px = parseInt(px);
var py = divObj.style.top;
py = parseInt(py);
if(counter<400)
{
counter++;
px++;
setTimeout("move_it()",20);
}
else if(counter < 800){
counter++;
py++;
setTimeout("move_it()",20);
}
else if(counter < 1200){
counter++;
px--;
setTimeout("move_it()",20);
}
else if(counter < 1600){
counter++;
py--;
setTimeout("move_it()",20);
}
divObj.style.left = px + "px";
divObj.style.top = py + "px";
}
function start()
{
divObj = document.getElementById("box");
divObj.style.position="absolute";
divObj.style.left="10px";
divObj.style.top="10px";
move_it();
}
//-->
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.