javascript - 单击按钮时无法阻止网页发布

标签 javascript html css

我研究了多种关于堆栈溢出的解决方案,但没有一个有效。

当我点击按钮时,它会将我带到一个新的 url yoursite.com/index.html?message=blah&pass=12

我希望它留在同一个页面中,只执行我编写的脚本。

请帮忙

<!DOCTYPE html>

<html>  
    <head>
        <meta charset="UTF-8">
        <title>Simple Encryption Using Caesar</title>
        <link rel="stylesheet" href="https://unpkg.com/marx-css/css/marx.min.css">

        <style>
            .hidden{
                visibility: hidden;
            }

        </style>
        <script src="encrypt.js"></script> 



    </head>
    <body>
        <main>
            <h2>What is this?</h2>

            <p>This application was built to <b>encrypt</b> data using the <b>Caesar method.</b>
                 All encryption is handled on <i>client side</i> in order to garuntee <b>data integrity.</b> </p>


            <form onsubmit=" event.preventDefault; doStuff(); ">
                <h5>Insert some text in the following box:</h5> <br>
                <textarea id="userText" name="message" cols="30" rows="10" placeholder="Your secret message" autofocus></textarea>
                <br>
                <h5>Enter Your Favorite Number</h5> <br>
                <input type="text" name="pass" id="pass" placeholder="Enter Your Favorite Number:"> <br>


                <button id="encrypt" type="submit" onclick="return false;" style="width: 100%;">Lets Encrpt</button>

                <div id="emessage"></div>

            </form>



        </main>

        <script>

            window.onload = function(){ doStuff(); };

            function doStuff(){
                document.getElementById("encrypt").onclick = function(){

                    var key = document.getElementById("pass").value;
                    var message = document.getElementById("userText").innerHTML;

                    var eMessage = caesarShift(message,key);

                    document.getElementById("emessage").innerHTML = eMessage ;




                    }
            }




        </script>



    </body>

</html>

我有另一个名为 encrypt.js 的 js 文件,它有一个名为 caesarShift()

的函数

我不知道为什么这不起作用。请帮忙!

最佳答案

event.preventDefault 更改为 event.preventDefault()

前者只引用函数而后者实际调用函数。

关于javascript - 单击按钮时无法阻止网页发布,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59321557/

相关文章:

html - 我们如何在不同的选项卡中使用相同的 View ,同时在该选项卡中更改不同的 View ?

php - Style -CSS 一个 php session 值

javascript - 创建旋转形状的背景

jquery - CSS从无处继承透明

html - 最简单和最干净的 Bootstrap 布局

javascript - 在 React 中更改 radio 输入后,如何从其他嵌套 sibling 中删除类名?

javascript - Dojo EdgeToEdgeStoreList 与自定义 ListItem 问题

javascript - jqueryUI 可排序 : Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

javascript - 如何将选项卡缩略图保存到本地存储?

javascript - 如何一次显示一个警报?