提交按钮警报框错误.如何识别错误并修复代码

Submit button alert box bug. How do I identify the bug and fix the code?

本文关键字：错误 识别 代码 何识别 按钮 提交      更新时间：2023-09-26

HELP！我需要知道这个代码会弹出一个警告框，但提交按钮不会弹出！错误是什么？如何在不完全更改所有错误的情况下修复代码？谢谢

 <!DOCTYPE html>
 <html>
 <head>
 <title>Dougie's Script</title>
 <script>
    var textinput;

    function submitHandler(e){
        alert("You entered " + textinput.value + "'n");
        e.preventDefault();
    }
    textinput=document.getElementById("textfield");
    var form = document.getElementById("theform");
    form.addEventListener("submit", submitHandler, false);
 </script>
 </head>
 <body>
 <form id="theform" action="#">
    <label>Enter text here...</label>
    <input id="textfield" type="text" >
    <input type="submit" value="Submit" >
 </form>
 </body>
 </html>

将其移动到结束表单标记下方：

<script type="text/javascript">
textinput=document.getElementById("textfield");
var form = document.getElementById("theform");
form.addEventListener("submit", submitHandler, false);
</script>

将<script>标签移动到<body>:的底部

    </form>
    <script>...</script>
</body>

现在，您的脚本正在尝试查找尚未创建的元素。另一种选择是侦听document的DOMContentLoaded事件，但这不是跨浏览器的。

尝试将脚本标记移动到正文的最底部。通过这种方式，脚本将在文档加载后执行（然后您的元素应该是"可获取的"answers"可连接的侦听器"。）

问题是在运行javascript时，页面的元素尚未加载。因此，document.getElementById("textfield")不返回元素，也没有任何事件与之绑定

尝试将javascript代码的事件处理封装如下：

var textfield;
function submitHandler(e) { ... }
// When the window loads, run this function.
window.onload = function() {
    textfield = document.getElementById("textfield");
    var form = document.getElementById("theform");
    form.addEventListener("submit", submitHandler, false);
 }

这将确保事件在加载后绑定到元素。

记住要把事情放在范围内；每次调用函数时都会动态获取文本输入，以便在响应中保持值的更新。此外，在尝试访问HTML树中的元素之前，请确保加载了DOM。由于您使用的是addEventListener，因此以下是脚本的工作版本：

<!DOCTYPE html>
<html>
    <head>
        <title>Dougie's Script</title>
        <script>
            (function(d){
                var init = function(){
                    var form = d.getElementById("theform"), submitHandler = function(e){
                        var  textinput = d.getElementById("textfield");
                        alert("You entered " + textinput.value + "'n");
                        e.preventDefault();
                    };
                    form.addEventListener("submit", submitHandler, false);
                };
                d.addEventListener("DOMContentLoaded", init, false);
            })(document);
        </script>
    </head>
    <body>
        <form id="theform" action="#">
            <label for="textfield">Enter text here...</label>
            <input id="textfield" type="text" >
            <input type="submit" value="Submit" >
        </form>
    </body>
 </html>
相关文章：