i try set my variable to undefined again when user click button “hapus” then i click submit again, “alert” trigerred and show user need to fill all radio but then after click ok the popup show up
how make the pop up not show up and only show up when user fill radio ?
and why i need to click 2 times to run function when click submit ? how make it only need click 1 time?
here the the link for the page in case something wrong in snippet
sry for my english,
here my code
let allData = ""
function inputData(data1, data2, data3, data4, data5) {
let result;
let result2;
result = Number(data1) + Number(data2) + Number(data3) + Number(data4) + Number(data5);
result2 = result / 5;
return result2;
}
function prosesData(data1, data2, data3) {
let result;
let result2;
result = Number(data1) + Number(data2) + Number(data3);
result2 = result / 3;
return result2
}
function outputData(data1, data2, data3, data4) {
let result;
let result2;
result = Number(data1) + Number(data2) + Number(data3) + Number(data4);
result2 = result / 4;
return result2;
}
function hitungData(data1, data2, data3) {
if (data1 >= 3 && data2 >= 3 && data3 >= 3) {
allData = "Berkelanjutan"
return allData;
} else if ((data1 <= 3 && data2 <= 3) && (data3 > 3)) {
allData = "Mandiri"
return allData;
} else if ((data1 >= 3 && data2 >= 3) && (data3 < 3)) {
allData = "Berkembang"
return allData;
} else if (data1 < 3 && data2 < 3 && data3 < 3) {
allData = "Dasar"
return allData;
} else if (data1 >= 3 || data2 >= 3 || data3 >= 3) {
allData = "Dasar"
return allData;
} else {
console.log("error");
}
}
function panggilSemua() {
//make variables from radio Input
let input1 = document.querySelector('input[name="input-soal1"]:checked')?.value;
let input2 = document.querySelector('input[name="input-soal2"]:checked')?.value;
let input3 = document.querySelector('input[name="input-soal3"]:checked')?.value;
let input4 = document.querySelector('input[name="input-soal4"]:checked')?.value;
let input5 = document.querySelector('input[name="input-soal5"]:checked')?.value;
if(input1 == undefined || input2 == undefined || input3 == undefined || input4 == undefined || input5 == undefined) {
return alert("Data Input Masih Ada Yang Kosong")
}
//Make Variable from radio proses
let proses1 = document.querySelector('input[name="proses-soal1"]:checked')?.value;
let proses2 = document.querySelector('input[name="proses-soal2"]:checked')?.value;
let proses3 = document.querySelector('input[name="proses-soal3"]:checked')?.value;
if(proses1 == undefined || proses2 == undefined || proses3 == undefined) {
return alert("Data Proses Masih Ada Yang Kosong")
}
//make variables from radio output
let output1 = document.querySelector('input[name="output-soal1"]:checked')?.value;
let output2 = document.querySelector('input[name="output-soal2"]:checked')?.value;
let output3 = document.querySelector('input[name="output-soal3"]:checked')?.value;
let output4 = document.querySelector('input[name="output-soal4"]:checked')?.value;
if(output1 == undefined || output2 == undefined || output3 == undefined || output4 == undefined) {
return alert("Data Output Masih Ada Yang Kosong")
}
let resultInput = inputData(input1, input2, input3, input4, input5);
let resultProsses = prosesData(proses1, proses2, proses3);
let resultOutput = outputData(output1, output2, output3, output4);
resultFinal = hitungData(resultInput, resultProsses, resultOutput);
document.getElementById('submit-btn').addEventListener('click', function(){
document.querySelector('.showdata').innerHTML = "Klasifikasi :" + " " + resultFinal;
document.querySelector('.bg-pop').style.display = "flex"
location.href = "#showdata"
});
document.querySelector('.close-btn').addEventListener('click',
function(){
document.querySelector('.bg-pop').style.display = "none"
});
}
function hapusData() {
input1 = undefined;
input2 = undefined;
input3 = undefined;
input4 = undefined;
input5 = undefined;
proses1 = undefined;
proses2 = undefined;
proses3 = undefined;
output1 = undefined;
output2 = undefined;
output3 = undefined;
}@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
* {
box-sizing: border-box;
font-family: 'Quicksand', sans-serif, monospace;
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-size: 16px;
position: relative;
}
header {
display: inline;
}
main {
padding: 20px;
overflow: auto;
}
h2 {
color: #00a2c6;
}
h3 {
color: #00a2c6;
}
footer {
padding: 20px;
color: white;
background-color: #00a2c6;
}
.jumbotron {
font-size: 20px;
padding: 60px;
background-color: #00c8eb;
text-align: center;
color: white;
}
nav {
background-color: #00a2c6;
padding: 5px;
position: -webkit-sticky;
position: sticky;
top: 0;
}
nav a {
font-size: 18px;
font-weight: 400;
text-decoration: none;
color: white;
}
nav a:hover {
font-weight: bold;
}
nav li {
display: inline;
list-style-type: none;
margin-right: 20px;
}
footer {
padding: 20px;
color: white;
background-color: #00a2c6;
text-align: center;
font-weight: bold;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.226);
border-radius: 10px;
padding: 20px;
margin-top: 20px;
}
.headerbox {
border-bottom: 1px solid black;
padding-bottom: 10px;
text-align: center;
font-size: 2em;
text-transform: uppercase;
font-weight: bold
}
#content {
width: 75%;
}
.allButton {
text-align: center;
}
.allButton .button {
padding: 20px 30px;
border-radius: 5px;
border: 1px solid white;
font-weight: bold;
}
.allButton .button:hover {
background-color: #00c8eb;
color: white;
font-weight: bold;
cursor: pointer;
}
.bg-pop {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
display: none;
}
.pop-content {
width: 500px;
height: 300px;
background-color:white;
border-radius: 10px;
padding: 50px;
text-align: center;
border: 1px solid black;
margin: 0 20px;
}
.showdata {
font-size:20px;
}
.close-btn {
padding: 20px 30px;
font-weight: bold;
border: 1px solid white;
border-radius: 10px;
}
.close-btn:hover {
background-color:#00c8eb;
color: white;
}
/* @media screen and (max-width: 992px) {
#content {
width: 100%;
padding: 0;
}
} */<html lang="id">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/bootstrap/css/bkkbn_css.css">
<script src="https://kit.fontawesome.com/073910e859.js" crossorigin="anonymous"></script>
<title>Simulasi Klasifikasi Kampung KB</title>
</head>
<body>
<header>
<div class="jumbotron">
<h1>Simulasi Klasifikasi Kampung KB</h1>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
<main>
<div id="#content">
<form>
<div class="databox">
<div class="card">
<div class="box input">
<div class="input headerbox">Input</div>
<div class="input-content">
<p>Keberadaan Pokja (kepemilikan pokja, SK Pokja, Pokja terlatih, sosialisasi pokja)</p>
<input type="radio" name="input-soal1" id="input-radio1" value="1">
<label for="radio">1</label>
<input type="radio" name="input-soal1" id="input-radio2" value="2">
<label for="radio">2</label>
<input type="radio" name="input-soal1" id="input-radio3" value="3">
<label for="radio">3</label>
<input type="radio" name="input-soal1" id="input-radio4" value="4">
<label for="radio">4</label>
<br>
<br>
<p>Sumber dana (APBN, APBD, Dana Desa, CSR, swadaya masy, Hibah, Lainnya)</p>
<input type="radio" name="input-soal2" id="input-radio5" value="1">
<label for="radio">1</label>
<input type="radio" name="input-soal2" id="input-radio6" value="2">
<label for="radio">2</label>
<input type="radio" name="input-soal2" id="input-radio7" value="3">
<label for="radio">3</label>
<input type="radio" name="input-soal2" id="input-radio8" value="4">
<label for="radio">4</label>
<br>
<br>
<p>Kepemilikan poktan (BKB, BKR, BKL, UPPKS, dan PIKR)</p>
<input type="radio" name="input-soal3" id="input-radio9" value="1">
<label for="radio">1</label>
<input type="radio" name="input-soal3" id="input-radio10" value="2">
<label for="radio">2</label>
<input type="radio" name="input-soal3" id="input-radio11" value="3">
<label for="radio">3</label>
<input type="radio" name="input-soal3" id="input-radio12" value="4">
<label for="radio">4</label>
<br>
<br>
<p>Ada sarana tempat sektereiatan dan sarana rumah data</p>
<input type="radio" name="input-soal4" id="input-radio13" value="1">
<label for="radio">1</label>
<input type="radio" name="input-soal4" id="input-radio14" value="2">
<label for="radio">2</label>
<input type="radio" name="input-soal4" id="input-radio15" value="3">
<label for="radio">3</label>
<br>
<br>
<p>Keberadaan PKB/PLKB dan Regulasi</p>
<input type="radio" name="input-soal5" id="input-radio16" value="1">
<label for="radio">1</label>
<input type="radio" name="input-soal5" id="input-radio17" value="2">
<label for="radio">2</label>
<input type="radio" name="input-soal5" id="input-radio18" value="3">
<label for="radio">3</label>
</div>
</div>
</div>
<div class="card">
<div class="box proses">
<div class="proses headerbox">Proses</div>
<div class="proses-content">
<p>Penggunaan data untuk perencaan antara lain Data PK, Data Rutin, Data podes, Data
Sektoral,
Sumber Data lainnya</p>
<input type="radio" name="proses-soal1" id="proses-radio1" value="1">
<label for="radio">1</label>
<input type="radio" name="proses-soal1" id="proses-radio2" value="2">
<label for="radio">2</label>
<input type="radio" name="proses-soal1" id="proses-radio3" value="3">
<label for="radio">3</label>
<input type="radio" name="proses-soal1" id="proses-radio4" value="4">
<label for="radio">4</label>
<br>
<br>
<p>Mekanisme operasional antara lain : rapat perencaan kegiatan koordinasi dengan litas
sektoral
melakukan sosialisasi kegiatan melakukan monev, membuat laporan.</p>
<input type="radio" name="proses-soal2" id="proses-radio5" value="1">
<label for="radio">1</label>
<input type="radio" name="proses-soal2" id="proses-radio6" value="2">
<label for="radio">2</label>
<input type="radio" name="proses-soal2" id="proses-radio7" value="3">
<label for="radio">3</label>
<input type="radio" name="proses-soal2" id="proses-radio8" value="4">
<label for="radio">4</label>
<br>
<br>
<p>Intervansi lintas sektoral : Keterlibatan sektor lain dalam pelaksaan kegiatan</p>
<input type="radio" name="proses-soal3" id="proses-radio9" value="1">
<label for="radio">1</label>
<input type="radio" name="proses-soal3" id="proses-radio10" value="2">
<label for="radio">2</label>
<input type="radio" name="proses-soal3" id="proses-radio11" value="3">
<label for="radio">3</label>
<input type="radio" name="proses-soal3" id="proses-radio12" value="4">
<label for="radio">4</label>
<br>
<br>
</div>
</div>
</div>
<div class="card">
<div class="box output">
<div class="output headerbox">Output</div>
<div class="output-content">
<p>Partisipasi keluarga / remaja dalam kegiatan Poktan BKB, BKR, BKL, PIK-R dan UPPKS
</p>
<input type="radio" name="output-soal1" id="output-radio1" value="1">
<label for="radio" id="wkwk">1</label>
<input type="radio" name="output-soal1" id="output-radio2" value="2">
<label for="radio">2</label>
<input type="radio" name="output-soal1" id="output-radio3" value="3">
<label for="radio">3</label>
<input type="radio" name="output-soal1" id="output-radio4" value="4">
<label for="radio">4</label>
<br>
<br>
<p>Capaian CPR kontrasepsi modern</p>
<input type="radio" name="output-soal2" id="output-radio5" value="1">
<label for="radio">1</label>
<input type="radio" name="output-soal2" id="output-radio6" value="2">
<label for="radio">2</label>
<input type="radio" name="output-soal2" id="output-radio7" value="3">
<label for="radio">3</label>
<input type="radio" name="output-soal2" id="output-radio8" value="4">
<label for="radio">4</label>
<br>
<br>
<p>Capaian MKJP kontrasepsi mix</p>
<input type="radio" name="output-soal3" id="output-radio9" value="1">
<label for="radio">1</label>
<input type="radio" name="output-soal3" id="output-radio10" value="2">
<label for="radio">2</label>
<input type="radio" name="output-soal3" id="output-radio11" value="3">
<label for="radio">3</label>
<input type="radio" name="output-soal3" id="poutput-radio12" value="4">
<label for="radio">4</label>
<br>
<br>
<p>Persentase PUS tidak berKB / unmet need</p>
<input type="radio" name="output-soal4" id="output-radio13" value="1">
<label for="radio">1</label>
<input type="radio" name="output-soal4" id="output-radio14" value="2">
<label for="radio">2</label>
<input type="radio" name="output-soal4" id="output-radio15" value="3">
<label for="radio">3</label>
<input type="radio" name="output-soal4" id="output-radio16" value="4">
<label for="radio">4</label>
<br>
<br>
</div>
</div>
</div>
<div class="card">
<div class="allButton">
<!-- <div class="showdata" style="margin-bottom: 20px;">HASIL DISINI</div> -->
<input class="button" id="hapus-btn" type="reset" onclick="hapusData()" value="hapus">
<input class="button" id="submit-btn" type="button" onclick="panggilSemua()" value="submit">
</div>
</div>
</div>
</form>
</div>
</main>
<footer>
<p>BKKBN</p>
<p id="tanggal"></p>
</footer>
<div class="bg-pop">
<div class="pop-content" id="showdata">
<i class="far fa-check-circle fa-4x" style="color: rgb(93, 223, 76)"></i>
<p class="showdata"></p>
<button class="close-btn">Tutup</button>
</div>
</div>
</body>
<script src="assets/js/bkkbn_js.js"></script>
<script>
const tanggal = new Date().getFullYear();
document.getElementById("tanggal").innerHTML = "©" + " " + tanggal;
</script>
</html>