在我取消选中收音机并将所有变量设置为未定义后，我的弹出元素将再次出现

Posted 2023-02-21

【中文标题】在我取消选中收音机并将所有变量设置为未定义后，我的弹出元素将再次出现

【英文标题】：my popup element will show up again after i uncheck the radio and set all variable to undefined

【发布时间】：2022-01-13 23:41:15

【问题描述】：

当用户单击“hapus”按钮时，我尝试再次将我的变量设置为未定义，然后我再次单击提交，“警报”触发并显示用户需要填写所有单选，但单击确定后弹出窗口显示

如何使弹出窗口不显示，仅在用户填写电台时显示？ 为什么单击提交时我需要单击 2 次才能运行功能？如何让它只需要点击 1 次？

这里是页面的链接，以防 sn-p 出现问题

test web

对不起我的英语， 这是我的代码

已解决我想通了

更新代码

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");

    


document.getElementById('submit-btn').addEventListener('click', function() 
    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")
    

    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")
    

    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.querySelector('.bg-pop').style.display = "flex"
    location.href = "#showdata"
    document.querySelector('.showdata').innerhtml = "Klasifikasi :" + " " + resultFinal;
);

document.querySelector('.close-btn').addEventListener('click',
    function()
        document.querySelector('.bg-pop').style.display = "none"
    );

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 = "&copy;" + " " + tanggal;
</script>

</html>

【参考方案1】：

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()       //this event
        document.querySelector('.showdata').innerHTML = "Klasifikasi :" + " " + resultFinal;
        document.querySelector('.bg-pop').style.display = "flex"
        location.href = "#showdata"
    );

    document.querySelector('.close-btn').addEventListener('click',
    function()      //this event
        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;

你有两个点击事件，两个按钮（重置，提交）。尝试删除您在脚本部分中为他们两个声明的点击事件。现在它可以正常工作了。只需复制下划线代码，我刚刚删除了不必要的行。

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.querySelector('.showdata').innerText = "Klasifikasi : " + resultFinal;
        document.querySelector('.bg-pop').style.display = "flex"
        location.href = "#showdata"
    

    function hapusData() 
        input1 = undefined;
        input2 = undefined;
        input3 = undefined;
        input4 = undefined;
        input5 = undefined;
        proses1 = undefined;
        proses2 = undefined;
        proses3 = undefined;
        output1 = undefined;
        output2 = undefined;
        output3 = undefined;
    

【讨论】：

是的，我刚刚意识到我有 2 个点击事件，谢谢@SameemSh