私はJavaScriptの新機能です。今、私はユーザーが自分のウェブサイトから公園を追加したり削除したりできるプロジェクトに取り組んでいます。このために、ポップアップウィンドウを表示して、状態や公園の名前を入力して追加または削除することができます。私は2つのモーダルを追加しようとしています.1つは追加するため、もう1つは削除することです。しかし、私は2つの別々のjsファイルでそれをやっているので、removeだけが呼び出されており、両方とも呼び出されています。ここで2つの類似したモーダル
は、ここに私のhtmlの一部
<body id="page-dash" class="container">
<div class="one">
<ul class="vertical">
<li id="addBtn" class="vertical"><a href="#">Add a Park</a><br></li>
<li id="remBtn" class="vertical"><a href="#">Remove a Park</a><br></li>
<li id="updateBtn" class="vertical"><a href="#">Update List</a><br></li>
<li id="passBtn" class="vertical"><a href="#">Reset Password</a><br></li>
</ul>
</div>
<div id="stateParkList" class="two">
<p id="desc">List of states and their National Parks.</p>
</div>
<!-- Pop Up Window -->
<div id="addWindow">
<div id="popUp-add" class="popUp">
<div class="popUp-content">
<span class="close">×</span>
<form id="Form">
<p>Add Park</p><br>
<p>State:</p>
<input type="text" id="state"><br>
<p>National Park:</p>
<input type="text" id="park"><br>
<button onclick="addPark()">Submit</button>
</form>
</div>
</div>
<div id="remWindow">
<div id="popUp-rem" class="popUp">
<div class="popUp-content">
<span class="close">×</span>
<form id="Form">
<p>Remove Park</p><br>
<p>State:</p>
<input type="text" id="state"><br>
<p>National Park:</p>
<input type="text" id="park"><br>
<button onclick="remPark()">Submit</button>
</form>
</div>
</div>
<footer>© Copyright CS234-SIUe-Spring 17. All rights reserved.</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="../js/parks.js"></script>
<script src="../js/add.js"></script>
<script src="../js/remove.js"></script>
ですadd.jsです:
var modal = document.getElementById('popUp-add');
var btn = document.getElementById("addBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
remove.js:
var modal = document.getElementById('popUp-rem');
var btn = document.getElementById("remBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
とCSS:
/*Pop up window in dashboard*/
.popUp {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.popUp-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 15%;
height: 23%;
font-size: 18px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
margin-top: -7%;
margin-right: -5%;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
form#Form input{
border: 1pt solid black;
}
form#Form input{
margin-bottom: 5%;
}
jsbin.comでコードを再現できますか? – Vuong
"*しかし、私は2つの別々のjsファイルでそれをやっているので、removeだけが呼び出されており、両方のために呼び出されています。 – JDB
他にも "* CS234-SIUe-Spring 17 *" ...これは宿題のようです。宿題の質問については、この投稿を確認してください:[宿題に関する質問と答えはどうすればいいですか?](https://meta.stackoverflow.com/questions/334822/how-do-i-ask-and-answer-homework-質問) – JDB