Assignment: Functions- PLEASE SCREENSHOT THE CODES One of the more useful pieces
ID: 3709172 • Letter: A
Question
Assignment: Functions- PLEASE SCREENSHOT THE CODES
One of the more useful pieces of javascript is the ability to add or change CSS to an element. Complete the functions in the following code example.
The visibility css property can allow different elements to be hidden and displayed at will:
document.getElementById("chartext").style.visibility = "hidden"
document.getElementById("chartext").style.visibility = "visible"
Consider the following code from a recent homework:
<span id='text'> CHOOSE YOUR STARTER </span>
<div>
1)<img src="bulbasaur.png">
2)<img src="squirtle.png">
3)<img src="charmander.png">
</div>
This code makes calls to 3 different functions: bulbasaur, squirtle, and charmander. Each of these can be used to modify the page in some way. Create the following elements on this page, below the div:
<div id='bulbtext'>Bulbasaur is a grass-type</div>
<div id='squirtletext'>Squirtle is a water-type</div>
<div id='chartext'>Charmander is a fire-type</div>
Finally, write 3 functions that apply the hidden css property to each of these elements, so that only the text that matches the most recently clicked image appears.
<script>
//write your 3 functions here.
</script>
<span id='text'> CHOOSE YOUR STARTER </span>
<div>
1)<img src="bulbasaur.png">
2)<img src="squirtle.png">
3)<img src="charmander.png">
</div>
<div id='bulbtext'>Bulbasaur is a grass-type</div>
<div id='squirtletext'>Squirtle is a water-type</div>
<div id='chartext'>Charmander is a fire-type</div>
Explanation / Answer
<html>
<head>
<title>Hidden Property</title>
<script>
function bulbasaur()
{
<!-- when bulbasaur() is called only bulbtext element should be "visible" remaining two should be "hidden" -->
document.getElementById('bulbtext').style.visibility="visible";
document.getElementById('squirtletext').style.visibility="hidden";
document.getElementById('chartext').style.visibility="hidden";
}
function squirtle()
{
<!-- when squirtle() is called only squirtletext element should be "visible" remaining two should be "hidden" -->
document.getElementById('bulbtext').style.visibility="hidden";
document.getElementById('squirtletext').style.visibility="visible";
document.getElementById('chartext').style.visibility="hidden";
}
function charmander()
{
<!-- when charmander() is called only chartext element should be "visible" remaining two should be "hidden" -->
document.getElementById('bulbtext').style.visibility="hidden";
document.getElementById('squirtletext').style.visibility="hidden";
document.getElementById('chartext').style.visibility="visible";
}
</script>
</head>
<body>
<span id='text'>CHOOSE YOUR STARTER</span>
<div>
1)<img src="bulbasaur.png"onclick="bulbasaur()">
2)<img src="squirtle.png"onclick="squirtle()">
3)<img src="charmander.png"onclick="charmander()">
</div>
<div id="bulbtext">Bulbasaur is a grass-type</div>
<div id="squirtletext">Squirtle is a water-type</div>
<div id="chartext">Charmander is a fire-type</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.