0

我正在制作一个电影评级应用程序，所以当您单击添加按钮时，会弹出一个表单。用户填写完表单后，我希望页面显示表单的文本值，例如，如果有人在第一个字段中写入 Lion King，则页面应在文档下方的某处显示 Movie Title: Lion King 但仍在同一页。我试过使用 document.write 方法，它工作得很好，但使用它并不好，我想在同一页面上显示值，而不是在不同的页面上。我也尝试过 .innerHTML ，但它仍然无法正常工作，但也许我只是做错了什么。我在 JavaScript 方面不是那么先进，所以请尝试帮助我。

document.getElementById("add").addEventListener('click', 
function() {
	document.querySelector(".bg-modal").style.display = 'flex';
});
document.querySelector(".close").addEventListener('click', 
function(){
	document.querySelector(".bg-modal").style.display = 'none';
});
 const movie = document.getElementById("movie");
document.getElementById("rate");
document.getElementById("link");
document.getElementById("des");
document.getElementById("s").onclick = function() {
	document.querySelector(".bg-modal").style.display = 'none';
	document.write("<h1 id = 'mt'>" + "Movie Title" + " : " + movie.value + "</h1>")
	
	
}
body {
	background-color:black;
}
#add {
	width:100px;
	height:100px;
	background:url("https://i.ibb.co/HCW4rRn/icons8-add-100.png");
	border:none;
	position:absolute;
	top:250px;
	bottom:0;
	left:610px;
	right:0;
	cursor:pointer;
}

p {
	color:white;
	font-weight:bold;
	position:absolute;
	top:360px;
	left:455px;
	
}
.bg-modal{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	display:flex;
	justify-content:center;
	align-items:center;
	display:none;
	
	
}
.modal-content{
	width:500px;
	height:300px;
	background:linear-gradient(42deg, #403B4A,#E7E9BB);
	border-radius:5px;
	position:relative;
}
.close{
	position:absolute;
	top:0;
	right:14px;
	font-size:32px;
	transform:rotate(45deg);
	cursor:pointer;
}
h1 {
	font-family: 'Hanalei', cursive;
}
h4 {
	font-family: 'Kanit', sans-serif;
	position:absolute;
	left:85px;
}
#des{
	width:150px;
	height:50px;
	position:absolute;
	left:150px;
	top:190px;
	border-color:black;
}
#movie {
	position:absolute;
	left:135px;
	border-color:black;
}
#rate {
	position:absolute;
	left:315px;
}
#link {
	position:absolute;
	left:140px;
	top:140px;
	border-color:black;
}
#s {
	border-color:white;
	text-weight:bold;
	position:absolute;
	left:195px;
	top:265px;
}
#result {
	color:white;
}
<!DOCTYPE html>
<html>
<head>
	<title>Movie Rating App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Hanalei|Kanit&display=swap" rel="stylesheet">
</head>
<body>
<input type ="button" id = "add"></input>
<p>Welcome to the Movie Rating App, here you can add <br>
all of your favorite Movies and TV shows and give them<br>
ratings so that if you don't know what to watch you can<br>
always come back here. Click the add button to get started. :)</p>
<div class = "bg-modal">
	<div class = "modal-content">
	<div class = "close">+</div>
	<h1 align = "center">PLEASE FILL OUT THIS FORM</h1>
	<input type = "text" id = "movie" placeholder = "Movie Name ">
	<select id = "rate">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	</select>
	<h4>Please put a link for the movie cover</h4>
	<input type = "url" id = "link" placeholder = "www.example.img.com">
	<br>
	<br>
	<input type = "text" placeholder = "Movie Description" id = "des" maxlength = "100">
	<br>
	<input type = "submit" id = "s">
	</div>
</div>


</body>

4

1 回答 1

1

与document.write您一起替换页面的整个 DOM。这就是为什么它现在是一个“新”页面。你需要的是一个更窄的选择器。

document.getElementById("add").addEventListener('click', 
function() {
	document.querySelector(".bg-modal").style.display = 'flex';
});
document.querySelector(".close").addEventListener('click', 
function(){
	document.querySelector(".bg-modal").style.display = 'none';
});
 const movie = document.getElementById("movie");
// WHAT IS HAPPENING HERE???? You are selecting a bunch of elements and not doing anything with it
document.getElementById("rate");
document.getElementById("link");
document.getElementById("des");
document.getElementById("s").onclick = function() {
	document.querySelector(".bg-modal").style.display = 'none';
    var newEl = document.createElement("p");
    newEl.innerHTML = "Movie Title" + " : " + movie.value;
    
    // Now append the new tag you created to selectedMovies div children
	document.getElementById('selectedMovies').appendChild(newEl);
	
}
body {
	background-color:black;
}
#add {
	width:100px;
	height:100px;
	background:url("https://i.ibb.co/HCW4rRn/icons8-add-100.png");
	border:none;
	position:absolute;
	top:250px;
	bottom:0;
	left:610px;
	right:0;
	cursor:pointer;
}

p {
	color:white;
	font-weight:bold;
	position:absolute;
	top:360px;
	left:455px;
	
}
.bg-modal{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	display:flex;
	justify-content:center;
	align-items:center;
	display:none;
	
	
}
.modal-content{
	width:500px;
	height:300px;
	background:linear-gradient(42deg, #403B4A,#E7E9BB);
	border-radius:5px;
	position:relative;
}
.close{
	position:absolute;
	top:0;
	right:14px;
	font-size:32px;
	transform:rotate(45deg);
	cursor:pointer;
}
h1 {
	font-family: 'Hanalei', cursive;
}
h4 {
	font-family: 'Kanit', sans-serif;
	position:absolute;
	left:85px;
}
#des{
	width:150px;
	height:50px;
	position:absolute;
	left:150px;
	top:190px;
	border-color:black;
}
#movie {
	position:absolute;
	left:135px;
	border-color:black;
}
#rate {
	position:absolute;
	left:315px;
}
#link {
	position:absolute;
	left:140px;
	top:140px;
	border-color:black;
}
#s {
	border-color:white;
	text-weight:bold;
	position:absolute;
	left:195px;
	top:265px;
}
#result {
	color:white;
}

#selectedMovies {
   position: relative;
   top: 150px;
}
<!DOCTYPE html>
<html>
<head>
	<title>Movie Rating App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Hanalei|Kanit&display=swap" rel="stylesheet">
</head>
<body>
<input type ="button" id = "add"></input>
<p>Welcome to the Movie Rating App, here you can add <br>
all of your favorite Movies and TV shows and give them<br>
ratings so that if you don't know what to watch you can<br>
always come back here. Click the add button to get started. :)</p>
<div id="selectedMovies"></div>
<div class = "bg-modal">
	<div class = "modal-content">
	<div class = "close">+</div>
	<h1 align = "center">PLEASE FILL OUT THIS FORM</h1>
	<input type = "text" id = "movie" placeholder = "Movie Name ">
	<select id = "rate">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	</select>
	<h4>Please put a link for the movie cover</h4>
	<input type = "url" id = "link" placeholder = "www.example.img.com">
	<br>
	<br>
	<input type = "text" placeholder = "Movie Description" id = "des" maxlength = "100">
	<br>
	<input type = "submit" id = "s">
	</div>
</div>


</body>

于 2019-07-25T19:22:17.357 回答