JavaScriptについて
解決したいこと
ここに解決したい内容を記載してください。
JavaScriptの仕様書を作っています。
キャンセルを押しても追加されてしまうので、
OKのときのみ追加されるように修正したい。
.base {
margin: 2% 7% 0;
height: 500px;
background: blue;
padding: 5% 10%;
box-shadow: 5px 9px 8px 5px rgba(0, 0, 0, 0.5);
}
input {
width: 300px;
height: 40px;
font-size: large;
}
#tuikaBtn {
background: green;
}
h1 {
font-family: serif;
}
.form-control::placeholder {
color: #cacaca;
opacity: 1;
}
table {
border-collapse: collapse;
}
th,td {
border: 1px solid #312929;
padding: 5px 10px;
}
.card {
width: 100%;
height: 350px;
}
.back{
padding: 30px;
position: absolute;
bottom: 0;
right: 0;
}
.form-group{
margin: 10px 0 15px 0px;
}
#result {
font-size: 120%;
margin: 10;
margin: 10px 20px;
padding: 10px 5px 20px;
margin: 10px 5px 10px 5px;
}
.row .card{
color: red;
}
.card{
color: blue;
display: block;
position: relative;
}
#modal{
display: none;
margin:1.5em auto 0;
background-color: white;
border: 1px solid black;
width: 50%;
padding: 10px 20px;
position: fixed;
border-radius: 5px;
}
#overLay{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.75);
}
</style>
</head>
<body>
<div class="base container">
<div class="row">
<h1>アカウント登録</h1>
</div>
<div class="row">
<div class="card" id="card">
<div class="card-block">
<form id="form-area" class="form-inline" method="post">
<div class="form-group">
<div class="input-group">
<input id="namae" name="name" type="text" class="form-control" placeholder="名前">
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム">
</div>
</div>
<div class="form-group">
<input id="tuikaBtn" type="button" name="touroku" value="追加">
</div>
</form>
<div id="tuikaMoto"></div>
<div id="result"></div>
</div>
</div>
</div>
</div>
</div>
<div id="overLay">
</div>
<script>
// ここに処理を書いていきます。
let tuikaTimes = 0;
let result = document.getElementById('result');
let hyoji = document.getElementById("tuikaBtn"); // 移動
tuikaBtn.addEventListener('click', function () {
let namae = document.getElementById("namae");
let nickname = document.getElementById("nickname");
if( namae.value===""||nickname.value==="") { return false; }
if(!window.confirm(namae.value + 'さん' + nickname.value + 'を登録します。よろしいですか？')) {
return false;
}
alert(namae.value + 'さん' + nickname.value + 'にて登録しました。');
tuikaTimes++;
if(tuikaTimes >= 3) {
hyoji.style.visibility="hidden";
return false;
}
});
window.addEventListener('DOMContentLoaded', ()=>{
tuikaBtn.addEventListener('click',()=>{
let tbl=result.querySelector('table');
if(!tbl){
tbl=document.createElement('table');
result.appendChild(tbl);
}
const v1=namae.value;
const v2=nickname.value;
if(v1 && v2){
const tr=[v1,v2].reduce( (x,y)=>(x.appendChild( Object.assign( document.createElement('td'),{textContent:y})),x),document.createElement('tr'));
tr.appendChild(Object.assign( document.createElement('input'),{type:'button',value:'削除',className:'del'}));
tbl.appendChild(tr);
namae.value='';
nickname.value='';
}
});
});
document.addEventListener('click',e=>{
if(e.target.matches('.del')){
tuikaTimes--; hyoji.style.visibility="visible";// 追加
e.target.closest('tr').remove();
}
});
document.getElementById('addButton').addEventListener('click', function () {
var result = confirm('追加しますか？');
if (result) {
var listItem = document.createElement('li');
listItem.textContent = '新しいアイテム';
document.getElementById('list').appendChild(listItem);
}
});
自分で試したこと
if文など色々追加などしていましたが、なかなか改善しません。
