Question

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>

Answer 1

将其移至结尾表单标记下方：

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

form.addEventListener("submit", submitHandler, false);
</script>

Answer 2

将<script>标记移至<body>的底部：

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

现在，您的脚本正在尝试查找尚未创建的元素。另一种方法是监听document的{{1}}事件，但这不是跨浏览器。

Answer 3

尝试将脚本标记移动到正文的最底部。这样脚本将在文档加载后执行（然后你的元素应该是“gettable”和“listener-attachable”。）

Answer 4

问题是当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);
 }

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

Answer 5

记住保持范围;每次调用函数时动态获取文本输入的位置，以便在响应中保持值更新。此外，在尝试访问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>

提交按钮警告框错误。如何识别错误并修复代码？

5 个答案: