Please help me with this. I am not understanding what to do. So the code below is supposed to display images when the checkboxed are clicked and display nothing when they are unclicked,. Dont worry about the css code JS function p01Func() { document.getElementById("description").innerHTML = "A mother joins an underground band of vigilantes to try to rescue her daughter from a state-run institution."; document.getElementById("poster").src = "images/night_raiders_poster.jpg"; document.getElementById("poster").style.display = "block"; document.getElementById("director").src = "images/night_raiders_director.jpg"; document.getElementById("director").style.display = "none"; document.getElementById("actors").src = "images/night_raiders_actors.jpg"; document.getElementById("actors").style.display = "none"; document.getElementById("check1").checked = false; document.getElementById("check2").checked = false; document.getElementById("check3").checked = false; } function checkUncheck1() { if (document.getElementById("check1").checked) { document.getElementById("poster").style.display = "inline"; } else { document.getElementById("poster").style.display = "none"; } } function checkUncheck2() { if (document.getElementById("check2").checked) { document.getElementById("director").style.display = "inline"; } else { document.getElementById("director").style.display = "none"; } } function checkUncheck3() { if (document.getElementById("check3").checked) { document.getElementById("actors").style.display = "inline"; } else { document.getElementById("actors").style.display = "none"; } } HTML EECS1012: Lab 3 My Computational Thinking Kit Ex 4 + 5 Ex4 + 5 Movie Director Actors (c) Author of this web page:
Please help me with this. I am not understanding what to do. So the code below is supposed to display images when the checkboxed are clicked and display nothing when they are unclicked,. Dont worry about the css code
JS
function p01Func() {
document.getElementById("description").innerHTML = "<p>A mother joins an underground band of vigilantes to try to rescue her daughter from a state-run institution.</p>";
document.getElementById("poster").src = "images/night_raiders_poster.jpg";
document.getElementById("poster").style.display = "block";
document.getElementById("director").src = "images/night_raiders_director.jpg";
document.getElementById("director").style.display = "none";
document.getElementById("actors").src = "images/night_raiders_actors.jpg";
document.getElementById("actors").style.display = "none";
document.getElementById("check1").checked = false;
document.getElementById("check2").checked = false;
document.getElementById("check3").checked = false;
}
function checkUncheck1() {
if (document.getElementById("check1").checked) {
document.getElementById("poster").style.display = "inline";
} else {
document.getElementById("poster").style.display = "none";
}
}
function checkUncheck2() {
if (document.getElementById("check2").checked) {
document.getElementById("director").style.display = "inline";
} else {
document.getElementById("director").style.display = "none";
}
}
function checkUncheck3() {
if (document.getElementById("check3").checked) {
document.getElementById("actors").style.display = "inline";
} else {
document.getElementById("actors").style.display = "none";
}
}
HTML
<!DOCTYPE html>
<html lang="En">
<head>
<meta charset="UTF-8">
<title> EECS1012: Lab 3 </title>
<!-- in Ex1, add a link tag here to connect it to the css file -->
<link rel="stylesheet" href="movies_ex4.css" type="text/css" >
<!-- in Ex2, add a script tag here to connect it to the js file -->
<script src="movies_ex4.js" type="text/javascript"></script>
</head>
<body>
<header>
<h1>My Computational Thinking Kit</h1>
<nav>
<!-- In Ex4, add an attribute onclick to this button -->
<button>Ex 4 + 5</button>
<button onclick="p01Func()">Ex4 + 5</button>
</nav>
</header>
<div class="column1 poster">
<input id="check1" type="checkbox" onclick="checkUncheck1()"> Movie
<img id="poster" src="path/to/images/solaris/solaris_poster.jpg" alt="Movie Poster" />
</div>
<div class="column2 director">
<input id="check2" type="checkbox" onclick="checkUncheck2()"> Director
<img id="director" src="path/to/images/solaris/solaris_director.jpg" alt="Director" />
</div>
<div class="column3 actors">
<input id="check3" type="checkbox" onclick="checkUncheck3()"> Actors
<img id="actors" src="path/to/images/solaris/solaris_actors.jpg" alt="Actors" />
</div>
<div id="description" class="description"></div>
<footer>(c) Author of this web page: <span><!-- In Ex 1, add your name --></span> </footer>
</body>
</html>
Step by step
Solved in 4 steps with 6 images
