I need to change this code so that there is no button, and the jackhammer animation starts as soon as the page loads. Unit 3 Graded Exercise 1 Michael Porter, JackhammerMan Exercise Start Bouncing
I need to change this code so that there is no button, and the jackhammer animation starts as soon as the page loads.
<!DOCTYPE html>
<html>
<head>
<!--
CIS213 Unit 3, Graded Exercise 1
Author: Michael Porter
Date: 9/15/22
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Unit 3 Graded Exercise 1</title>
</head>
<body>
<h1>Michael Porter, JackhammerMan Exercise</h1>
<img id="imgJackhammer" src="jackhammer0.gif" width="113" height="100"
alt="Image of a man with a jackhammer."><br>
<button onclick="startBouncing()">Start Bouncing</button>
<script>
var jackhammers = ["jackhammer0.gif", "jackhammer1.gif", "jackhammer2.gif",
"jackhammer3.gif", "jackhammer4.gif", "jackhammer5.gif", "jackhammer6.gif",
"jackhammer7.gif", "jackhammer8.gif", "jackhammer9.gif", "jackhammer10.gif",];
var curJackhammer = 0;
function bounce() {
if (++curJackhammer>10) curJackhammer = 0;
var imgElement = document.getElementById("imgJackhammer");
imgElement.src = jackhammers[curJackhammer];
}
function startBouncing() {
setInterval(bounce, 90);
}
</script>
</body>
</html>
![Porter_W3_Graded_Exercise1.html X
<!DOCTYPE html>
<html>
<head>
1
2
3
456789
10
11
12
13
14
15
16
17
8685
18
19
20
21
22
23
24
25
26
27
28
29
30
31
10-0
<!--
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unit 3 Graded Exercise 1</title>
-</head>
<body>
CIS213 Unit 3, Graded Exercise 1
Author: Michael Porter
Date: 9/15/22
<h1>Michael Porter, JackhammerMan Exercise</h1>
<img id="imgJackhammer" src="jackhammer0.gif" width="113" height="100"
alt="Image of a man with a jackhammer."><br>
<button onclick="startBouncing ()">Start Bouncing</button>
<script>
var jackhammers = ["jackhammer0.gif", "jackhammerl.gif", "jackhammer2.gif",
"jackhammer3.gif", "jackhammer4.gif", "jackhammer5.gif", "jackhammer6.gif",
"jackhammer7.gif", "jackhammer8.gif", "jackhammer9.gif", "jackhammer10.gif",];
32
33
34
35
36
</body>
37 -</html>
var curJackhammer = 0;
function bounce () {
if (++curJackhammer>10) curJackhammer = 0;
var imgElement = document.getElementById("imgJackhammer");
imgElement.src = jackhammers [curJackhammer] ;
function startBouncing () {
setInterval (bounce, 90);
</script>](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2F4d27a8a6-cc74-416c-a782-397e5cce3206%2F1bd120af-c737-4745-972a-1ffbb902ad18%2Fh84iruj_processed.png&w=3840&q=75)
<!DOCTYPE html>
<html>
<head>
<!--
CIS213 Unit 3, Graded Exercise 1
Author: Michael Porter
Date: 9/15/22
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Unit 3 Graded Exercise 1</title>
</head>
<body>
<h1>Michael Porter, JackhammerMan Exercise</h1>
<img id="imgJackhammer" src="jackhammer0.gif" width="113" height="100"
alt="Image of a man with a jackhammer."><br>
<button onclick="startBouncing()">Start Bouncing</button>
<script>
var jackhammers = ["jackhammer0.gif", "jackhammer1.gif", "jackhammer2.gif",
"jackhammer3.gif", "jackhammer4.gif", "jackhammer5.gif", "jackhammer6.gif",
"jackhammer7.gif", "jackhammer8.gif", "jackhammer9.gif", "jackhammer10.gif",];
var curJackhammer = 0;
function bounce() {
if (++curJackhammer>10) curJackhammer = 0;
var imgElement = document.getElementById("imgJackhammer");
imgElement.src = jackhammers[curJackhammer];
}
function startBouncing() {
setInterval(bounce, 90);
}
</script>
</body>
</html>
Step by step
Solved in 4 steps with 3 images
