亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

為什么我提交表單后結果不保留?

為什么我提交表單后結果不保留?

慕容森 2022-08-18 16:02:40
我正在嘗試添加兩個放在輸入字段中的數字。然后我想顯示結果,但結果立即消失。function add() {    var num1 = document.getElementById("num1").value;    var num2 = document.getElementById("num2").value;        var result = num1 + num2;    var display = document.getElementById("display");    display.append(result);}<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>JS</title>    </head>    <body id="body">            <form action="" id="form">                <label for="num1">Number 1</label>                                    <input type="number" name="num1" id="num1">                <label for="num2">Number 2</label>                    <input type="number" name="num2" id="num2">                <button id="submit" onclick="add()">Add</button>            </form>            <p id="display"></p>            <script language="javascript" type="text/javascript" src="js.js"></script>        </div>    </body></html>我做錯了什么?感謝您的任何幫助!
查看完整描述

1 回答

?
函數式編程

TA貢獻1807條經驗 獲得超9個贊

您需要添加以防止此行為,并在添加之前將值轉換為數字形式:event.preventDefault()


function add(e) {

    e.preventDefault();

    var num1 = document.getElementById("num1").value;

    var num2 = document.getElementById("num2").value;

    if(num1 && num2){

         var result = Number(num1) + Number(num2);

         var display = document.getElementById("display");

         display.append(result);

    }

}

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>JS</title>

    </head>

    <body id="body">

            <form action="" id="form">

                <label for="num1">Number 1</label>                

                    <input type="number" name="num1" id="num1">

                <label for="num2">Number 2</label>

                    <input type="number" name="num2" id="num2">

                <button id="submit" onclick="add(event)">Add</button>

            </form>

            <p id="display"></p>

            <script language="javascript" type="text/javascript" src="js.js"></script>

        </div>

    </body>

</html>


查看完整回答
反對 回復 2022-08-18
  • 1 回答
  • 0 關注
  • 146 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號