and kind web developers,
the HTML, CSS, and JavaScript code are posted below
I am using OMDB API to retrieve information from its movie database upon searching. The API works perfectly. However, my modal feature doesn't pop up upon searching, and the "close" function doesn't work either.
In addition, this is the error I get from Safari's Web Inspector:
TypeError: undefined is not an object (evaluating 'span.onclick = >function() { modal.style.display = "none";}')
Thank you in advance!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">
</script>
<script src="film.js"></script>
<div class="search_bar">
<form onsubmit="return false" id="searchbox" action="">
<input type="text" id="search" placeholder="movie title">
<input name ="myBtn" id ="myBtn" type="submit"
onclick="getMovie()" value="search">
</form>
</div>
<div name ="myModal" id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span name="close" class="close">x</span>
<h1 id="title"></h1>
<div class="modal-body">
<img src="">
<h2 id="year"></h2>
<h2 id="Director"></h2>
<h2 id="rating"></h2>
<p id="plot" style="font-size:23px"></p>
</div>
</div>
</div>
</div>
</body>
</html>
JavaScript
function getMovie()
{
$.ajax({
type: "get",
url: "http://www.omdbapi.com/?",
data: {
t: document.getElementById('search').value,
type: 'movie'
},
success: function (movies) {
document.getElementById('title').innerHTML = movies.Title;
$('.modal-header img').attr("src", movies.Poster);
document.getElementById('year').innerHTML = "Year: " + movies.Year;
document.getElementById('rating').innerHTML = "Rating: " +
movies.Rated;
document.getElementById('Director').innerHTML = "Director: " +
movies.Director;
document.getElementById('plot').innerHTML = "Plot: " + movies.Plot;
}
} );
}
var modal = document.getElementsByName('myModal');
// Get the button that opens the modal
var btn = document.getElementsByName("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
CSS
body{
background-image: url("http://kosmosaicbooks.com/wp-
content/uploads/2012/01/Favorite-Sci-Fi-Posters.jpg");
background-size: 100%;
}
#Information {
width:20%;
margin:0 auto;
}
#searchbox
{
background-color: #eaf8fc;
background-image: linear-gradient(#fff, #d4e8ec);
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #c4d9df #a4c3ca #83afb7;
width: 500px;
height: 35px;
padding: 10px;
margin: 100px auto 50px;
overflow: hidden;
}
#search,
#myBtn {
float: left;
}
#search {
padding: 5px 9px;
height: 23px;
width: 380px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
border-radius: 50px 3px 3px 50px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255,
255, 1);
}
#myBtn
{
background-color: #6cbb6b;
background-image: linear-gradient(#95d788, #6cbb6b);
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #7eba7c #578e57 #447d43;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3),
0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 35px;
margin: 0 0 0 10px;
padding: 0;
width: 90px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
#myBtn:hover {
background-color: #95d788;
background-image: linear-gradient(#6cbb6b, #95d788);
}
#myBtn:active {
background: #95d788;
outline: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#myBtn::-moz-focus-inner {
border: 0;
}
/*
.modal-content {
width: 80%;
}
.modal-header {
background-color: white;
text-align: center;
}
*/
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
You can do with jQuery as follows:
$(function() {
var modal = $('#myModal');
// Get the button that opens the modal
var btn = $("#myBtn");
// Get the <span> element that closes the modal
var btnClose = $(".close");
function getMovie() {
$.ajax({
type: "get",
url: "https://www.omdbapi.com/?",
data: {
t: document.getElementById('search').value,
type: 'movie'
},
success: function (movies) {
$('#title').text(movies.Title);
$('.modal-header img').attr("src", movies.Poster);
$('#year').text("Year: " + movies.Year);
$('#rating').text("Rating: " + movies.Rated);
$('#Director').text("Director: " + movies.Director);
$('#plot').text("Plot: " + movies.Plot);
modal.fadeIn();
}
});
}
// When the user clicks the button, open the modal
btn.click(function(event) {
event.preventDefault();
getMovie();
});
// When the user clicks on <span> (x), close the modal
btnClose.click(function() {
modal.fadeOut();
});
// When the user clicks anywhere outside of the modal, close it
$(window).click(function(event) {
if (!$(event.target).closest(modal).length) {
modal.fadeOut();
}
});
});body{
background-image: url("http://kosmosaicbooks.com/wp-
content/uploads/2012/01/Favorite-Sci-Fi-Posters.jpg");
background-size: 100%;
}
#Information {
width:20%;
margin:0 auto;
}
#searchbox
{
background-color: #eaf8fc;
background-image: linear-gradient(#fff, #d4e8ec);
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #c4d9df #a4c3ca #83afb7;
width: 500px;
height: 35px;
padding: 10px;
margin: 100px auto 50px;
overflow: hidden;
}
#search,
#myBtn {
float: left;
}
#search {
padding: 5px 9px;
height: 23px;
width: 380px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
border-radius: 50px 3px 3px 50px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255,
255, 1);
}
#myBtn
{
background-color: #6cbb6b;
background-image: linear-gradient(#95d788, #6cbb6b);
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #7eba7c #578e57 #447d43;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3),
0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 35px;
margin: 0 0 0 10px;
padding: 0;
width: 90px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
#myBtn:hover {
background-color: #95d788;
background-image: linear-gradient(#6cbb6b, #95d788);
}
#myBtn:active {
background: #95d788;
outline: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#myBtn::-moz-focus-inner {
border: 0;
}
/*
.modal-content {
width: 80%;
}
.modal-header {
background-color: white;
text-align: center;
}
*/
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">
</script>
<script src="film.js"></script>
<div class="search_bar">
<form onsubmit="return false" id="searchbox" action="">
<input type="text" id="search" placeholder="movie title">
<input name ="myBtn" id ="myBtn" type="submit" value="search">
</form>
</div>
<div name ="myModal" id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span name="close" class="close">x</span>
<h1 id="title"></h1>
<div class="modal-body">
<img src="">
<h2 id="year"></h2>
<h2 id="Director"></h2>
<h2 id="rating"></h2>
<p id="plot" style="font-size:23px"></p>
</div>
</div>
</div>
</div>