0

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

 <!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>
4

5 回答 5

0

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

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

form.addEventListener("submit", submitHandler, false);
</script>
于 2013-07-29T04:28:23.327 回答
0

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

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

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

于 2013-07-29T04:30:55.223 回答
0

尝试将您的脚本标签移动到正文的最底部。这样脚本将在文档加载后执行（然后您的元素应该是“可获取的”和“可附加的侦听器”。）

于 2013-07-29T04:31:27.850 回答
0

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

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

于 2013-07-29T04:38:38.950 回答
0

记住将事情保持在范围内；每次调用函数时，您都在动态获取文本输入，以便在响应中保持值更新。此外，请确保在尝试访问 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>
于 2013-07-29T04:40:02.137 回答