why doesn\'t my menu button work anymore <!DOCTYPE html> <html> <head> <meta cha
ID: 3821191 • Letter: W
Question
why doesn't my menu button work anymore
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video library</title>
<script>
function displayValue() {
var displayname=document.getElementById("t1").value;
var name of video=document.getElementById("t2").value;
var comment=document.getElementById("t3").value;
var value=displayname+name of video+comment+document.getElementById("date").value;
p1.innerHTML=value;
}
function open1(){
document.getElementById("navigation").style.width="100%";
}
function close2(){
document.getElementById("navigation").style.width="0%";
}
</script>
<style>
body{
background-color:#810F0C
}
form{
border:1px solid #000000;
-moz-box-shadow:0 1px 1px #000000;
-webkit-box-shadow:0 1px 1px #000000;
box-shadow:0 1px 1px #000000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background-color:#666633;
padding: 10px;
width: 50%
}
</style>
<link rel="stylesheet" type="text/css" href="final css.css">
</head>
<body >
<div id="navigation" class="navigation_class">
<a id="anchor" href="#">Close</a>
<div class="d1"><a href="final project.html">Slideshow</a></div>
<div class="d2"><a href="page 2.html">Favorite Food</a></div>
<div class="d4"><a href="page 4.html">Summary page</a></div>
</div>
<span><h3>Menu</h3></span>
<center><h2>Youtube Video Library</h2><br></center>
<center><table border="1"bgcolor="#CCCC99">
<tr>
<th>Title</th>
<th>Video</th>
</tr>
<tr>
<td>Rick and Morty - Season 3 Episode 1</td>
<td><iframe width="200" height="200" src="https://www.youtube.com/embed/f-OmtdM7yFQ" frameborder="0" allowfullscreen></iframe></iframe></td>
</tr>
<tr>
<td>Potter Puppet Pals: The Mysterious Ticking Noise</td>
<td><iframe width="200" height="200" src="https://www.youtube.com/embed/Tx1XIm6q4r4" frameborder="0" allowfullscreen></iframe></td>
</tr>
<tr>
<td>The Weeknd - False Alarm</td>
<td><iframe width="200" height="200" src="https://www.youtube.com/embed/CW5oGRx9CLM" frameborder="0" allowfullscreen></iframe> </td>
</tr>
<tr>
<td>"Jay Alverrez & Alexis Ren - Burn Fast"</td>
<td><iframe width="200" height="200" src="https://www.youtube.com/embed/FqUDcMRbrNA" frameborder="0" allowfullscreen></iframe> </td>
</tr>
</table>
</center>
<center>
<form id="f1">
<fieldset>
<label for="t1">display name: </label><input type="text" name="t1" id="t1"><br>
<label for="t2">name of video:</label><input type="text" name="t2" id="t2"><br>
<label for="t3">Comment:</label><input type="text" name="t3" id="t3"><br>
<input type="submit" name="s1" id="s1" value="submit"><br>
</fieldset>
</form>
</center>
<center>
<p id="p1">
</p>
</center>
</body>
</html>
Explanation / Answer
"name of video" variable name is not valid. space is not valid in a variable name.
To display or close the menu when the respective buttons clicked, I've replaced the open1() function code. Instead of using (style.width), use style.display
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video library</title>
<script>
function displayValue() {
var displayname=document.getElementById("t1").value;
var nameofvideo=document.getElementById("t2").value;
var comment=document.getElementById("t3").value;
var value=displayname+nameofvideo+comment+document.getElementById("date").value;
p1.innerHTML=value;
}
function open1(){
document.getElementById("navigation").style.display="block"
}
function close2(){
document.getElementById("navigation").style.display="none"
}
</script>
<style>
body{
background-color:#810F0C
}
form{
border:1px solid #000000;
-moz-box-shadow:0 1px 1px #000000;
-webkit-box-shadow:0 1px 1px #000000;
box-shadow:0 1px 1px #000000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background-color:#666633;
padding: 10px;
width: 50%
}
</style>
<link rel="stylesheet" type="text/css" href="final css.css">
</head>
<body >
<div id="navigation" class="navigation_class">
<a id="anchor" href="#">Close</a>
<div class="d1"><a href="final project.html">Slideshow</a></div>
<div class="d2"><a href="page 2.html">Favorite Food</a></div>
<div class="d4"><a href="page 4.html">Summary page</a></div>
</div>
<span><h3>Menu</h3></span>
<center><h2>Youtube Video Library</h2><br></center>
<center><table border="1"bgcolor="#CCCC99">
<tr>
<th>Title</th>
<th>Video</th>
</tr>
<tr>
<td>Rick and Morty - Season 3 Episode 1</td>
<td><iframe width="200" height="200" src="https://www.youtube.com/embed/f-OmtdM7yFQ" frameborder="0" allowfullscreen></iframe></iframe></td>
</tr>
<tr>
<td>Potter Puppet Pals: The Mysterious Ticking Noise</td>
<td><iframe width="200" height="200" src="https://www.youtube.com/embed/Tx1XIm6q4r4" frameborder="0" allowfullscreen></iframe></td>
</tr>
<tr>
<td>The Weeknd - False Alarm</td>
<td><iframe width="200" height="200" src="https://www.youtube.com/embed/CW5oGRx9CLM" frameborder="0" allowfullscreen></iframe> </td>
</tr>
<tr>
<td>"Jay Alverrez & Alexis Ren - Burn Fast"</td>
<td><iframe width="200" height="200" src="https://www.youtube.com/embed/FqUDcMRbrNA" frameborder="0" allowfullscreen></iframe> </td>
</tr>
</table>
</center>
<center>
<form id="f1">
<fieldset>
<label for="t1">display name: </label><input type="text" name="t1" id="t1"><br>
<label for="t2">name of video:</label><input type="text" name="t2" id="t2"><br>
<label for="t3">Comment:</label><input type="text" name="t3" id="t3"><br>
<input type="submit" name="s1" id="s1" value="submit"><br>
</fieldset>
</form>
</center>
<center>
<p id="p1">
</p>
</center>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.