one of the parts for the page was \"include a button in this form and display al
ID: 3821143 • Letter: O
Question
one of the parts for the page was "include a button in this form and display all the collected information along the current date when they click on a submit button" and then "JavaScript function in order to display the latest comment from the user on your web page. (Hint: you will require another HTML element in addition to a form, which acts as a placeholder for the newly added comments. This placeholder could be any h1-h6 or p elements without any content inside.) Display the current date and the user's display name along with the video’s name/id and their comment. "
why does my code not work?
<!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></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>
</form>
</center>
<center>
<p id="p1">
</p>
</center>
</fieldset>
</div>
</body>
</html>
Explanation / Answer
Hello, I have found some problems in your code and corrected it. I have commented correction inside the code.
Here is your code and it works as expected
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video library</title>
<script>
function displayValue() {
var displayname=document.getElementById("t1").value; // you forgot to put ; here
var nameofvideo=document.getElementById("t2").value; // you forgot to put ; here and variable names should not contain spaces
var comment=document.getElementById("t3").value; // you forgot to put ; here
// This is how you can get current date=====================
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
today = dd+'/'+mm+'/'+yyyy;
//===========================================================
var value=displayname+" "+nameofvideo+" "+comment+" "+today;// I added spaces in between for better readability
var p1=document.getElementById("p1"); // You forgot to write this line
p1.innerHTML=value;
return false;
}
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></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>
<!-- we should use type=button in following element -->
<input type="button" name="s1" id="s1" value="submit"><br>
</form>
</center>
<center>
<p id="p1">
</p>
</center>
</fieldset>
</div>
</body>
</html>
If you have any queries or doubts regarding this solution then please do comment.
Good luck.
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.