Alright, let’s make this a bit more challenging. For this stage of the lab you w
ID: 3763785 • Letter: A
Question
Alright, let’s make this a bit more challenging. For this stage of the lab you will be adding in the Javascript code on your own. Add in some Javascript that will do the following:
When a person clicks on your happy image, change the image to a sad face. Also change the color of your <h1> HTML tag to #1E90FF.
When a person clicks on your sad image, change the image back to your happy image. Also, change the color of your <h1> HTML tag back to its original color.
Some tips for your journey into coding:
Remember that we ID’ed the image tag “emotional_faces”. Use this ID in your Javascript to change the image.
Create an ID for the <h1> HTML tag. Name it whatever you like. Use this ID in your Javascript to change the color.
You will need to use an “onclick” handler with your Javascript code. This is what will “listen” in to when a user clicks on your image.
Your Javascript code will be written inside of the <head> HTML tags right after the CSS style block. Your Javascript code needs to be inside of a <script> HTML tag as shown below:
<head>
<style type=”text/css”>
# CSS Code Here
</style>
<script type=”text/javascript”>
# Javascript Code Here
</script>
</head>
this is what i have so far
<head>
<style type=”text/css”>
# CSS Code Here
</style>
<script type=”text/javascript”>
# Javascript Code Here
</script>
</head>
this is what i have so far
Explanation / Answer
The code is as following---
<!DOCTYPE html>
<html>
<body>
<img id="emotional_faces" src="http://thebridgehc.org/wp-content/uploads/2014/09/Happy-face.png" width="100" height="180">
<h1 id="colr" colour="red">Click on the image to change the Emotions</h1>
<script>
function changetheImage() {
var image = document.getElementById('emotional_faces');
var elem = document.getElementById("colr");
if (image.src.match("Happy-face"))
{
image.src = "http://ww2.valdosta.edu/~anmills/sadface.jpg";
elem.style.color = "#1E90FF";
}
else
{
image.src = "http://thebridgehc.org/wp-content/uploads/2014/09/Happy-face.png";
elem.style.color = "red"
}
}
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.