首页 > 解决方案 > JavaScript中的功能和按钮问题

问题描述

今天我有一个棘手的问题(至少对我来说)。我的代码中有一个错误,我不知道如何消除它。基本上我在 JavaScript 中创建一个简单的表单作为作业,我遇到了这个问题。

我必须以这种形式输入我的年龄,现在一切正常。但我必须输入两次:一次带有<input>标签,另一次带有弹出窗口。我可以<input>很好地在标签中输入值,但是当我尝试通过 prompt() 输入值时,它会“重置”脚本,所以我会丢失<input>对象中的值。

我需要一种将这些信息存储在某处的方法,或者阻止 prompt() 删除这些值或重置页面。

<html lang="en">
<head>
    <title>Document</title>
    <style>
        * {margin: 0; padding: 0;}
        body {padding: 20px;}
    </style>
    <script>
        var eta_btn;
        function eta_controllo(eta_btn) {
            eta_btn = Number(prompt("Inserisci la tua età"));
            console.log(eta_btn);
        }
        function profession() {
            var temp = document.getElementById("select").selectedIndex; 
            if (temp == 0) {
                document.getElementById("lavoratore_txt").style.display = "";
                document.getElementById("studente_txt").style.display = "none";
            } else if (temp == 1) {
                document.getElementById("studente_txt").style.display = "";
                document.getElementById("lavoratore_txt").style.display = "none";
            } else {
                document.getElementById("studente_txt").style.display = "none";
                document.getElementById("lavoratore_txt").style.display = "none";
            }
        } 
        function send_to_server() {
            if (!(eta_btn == document.getElementById("età").value)) {
                alert("Le due età inserite non sono concordi");
                return false;
            } 
            else if (eta_btn == document.getElementById("età").value && eta_btn < 14) {
                alert("Hai meno di 14 anni!");
                return false;
            } else if (confirm("Sicuro di aver scelto la provincia " + document.querySelector('input[name="città"]:checked').value)) 
                alert("Dati inviati correttamente");
            else {
                alert("Errore");
                return false;
            }
        }
    </script>
</head>
<body>
    <form action="">
        <p>NOME</p>
        <input placeholder="scrivi qui il tuo nome" type="text"><br><br>
        <p>PASSWORD</p>
        <input placeholder="scrivi qui la tua password" type="text"><br><br>
        <p>ETA'</p>
        <input placeholder="scrivi qui la tua età" type="text" id="età">
        <button onclick="eta_controllo()">CONTROLLO</button><br><br>
        <input name="città" type="radio">GENOVA<br>
        <input name="città" type="radio">SAVONA<br>
        <input name="città" type="radio">IMPERIA<br>
        <input name="città" type="radio">LA SPEZIA<br><br>
        <select name="" id="select" onchange="profession()">
            <option value="lavoratore">Lavoratore</option>
            <option value="studente">Studente</option>
            <option value="disoccupato">Disoccupato</option>
        </select>
        <p id="studente_txt" style="display: none">Vai a studiare!</p><br>
        <textarea id="lavoratore_txt" style="display: none;" name="" id="" cols="30" rows="10"></textarea><br><br>
        <button>ANNULLA TUTTO</button>
        <button onclick="send_to_server()">INVIA AL SERVER</button>
    </form>
</body>
</html>

标签: javascript

解决方案


您所要做的就是添加type="button"到按钮。按钮的默认类型是"submit",因此当您单击它时,它将提交表单。


推荐阅读