Question

我正在做一个关于如何使用JavaScript中的表单元素的简单实际测试，我不太明白错误。我检查了网络浏览器的萤火虫，控制台没有错误，我认为这很奇怪。我怎么想知道出了什么问题，如果它没有给出错误。这是最令人沮丧的部分因为我需要编译器来轻松检测和修复错误。我使用Notepad ++与HTML文件中嵌入的JS脚本。通过引用更好的软件或网站来帮助我有效地理解和以正确的方式执行JavaScript的任何事情都会很棒，无论什么会增强我对它的理解，因为我仍然没有得到它并且不断获得很多有些事情是错误的，甚至是最糟糕的，网络控制台什么也没有显示，或者当我发出明显错误时。

当用户点击按钮时，它会在其下面创建一个文本框，如果没有，则会将其删除并替换为textnode。这是代码：JSfiddle

JavaScript的：

function frm1
    {
        var form1 = document.getElementById("form1");

        btnCreate.onClick = function()
        {
            if(cbCheck.checked)
            {
                var txt = form1.createElement("input");
                txt.type = "text";
                txt.setAttribute("text","Write Here!");
            }
            else if(!cbCheck.checked)
            {
                form1.removeChild(txt);
                var para = form1.createElement("p");
                para.createTextNode("Text Removed!");
                para.setAttribute("style","color:red;");
                form1.appendChild(para);
            }
        }
    }

HTML ：

<!DOCTYPE html>
<html>
<head>
<title>Practical 340 Review JS</title>
<meta charset="utf-8"/>
<script type="text/javascript" href="test.js">

    function frm1
    {
        var form1 = document.getElementById("form1");

        btnCreate.onClick = function()
        {
            if(cbCheck.checked)
            {
                var txt = form1.createElement("input");
                txt.type = "text";
                txt.setAttribute("text","Write Here!");
            }
            else if(!cbCheck.checked)
            {
                form1.removeChild(txt);
                var para = form1.createElement("p");
                para.createTextNode("Text Removed!");
                para.setAttribute("style","color:red;");
                form1.appendChild(para);
            }
        }
    }

</script>
</head>

<body>
<div id="prob1">
    <h1>Form Elements</h1>
    <form id="form1">
        <p>Checked?<input type="checkbox" name="cbCheck" value="Checked?"/></p>
        <input type="button" value="Create" name="btnCreate"/>
    </form>
</div>

<div id="prob2">

</div>

<div id="prob3">

</div>
</body>
</html>

Answer 1

可用于调试JavaScript的最佳工具之一是所有现代浏览器中都提供的内置JS调试器。我不记得在Firefox中命名的选项卡是什么，但在Chrome中，有一个“来源”选项卡，您可以在其中设置代码中的断点。当浏览器执行该代码时，它将在该行停止并等待您告诉它继续。代码暂停时，您可以检查变量的值等。

您的代码有几个问题，我将尝试列出。我还用工作代码创建了一个新的小提琴。

http://jsfiddle.net/itsananderson/KTZ89/8/

函数声明需要parens。你的“frm1”没有它们
您从未调用过“frm1”，因此代码永远不会运行
JavaScript不会自动为表单元素创建变量，因此您必须自己创建它们。请参阅btnCreate和cbCheck。
你不能form1.createElement。相反，document.createElement。与createTextNode

这是更新后的JavaScript：

  function frm1() {
    var form1 = document.getElementById("form1");

    var txt = document.createElement("input");
    txt.type = "text";
    txt.setAttribute("value","Write Here!");

    var para = document.createElement("p");
    para.appendChild(document.createTextNode("Text Removed!"));
    para.setAttribute("style","color:red;");

    form1['btnCreate'].onclick = function()
    {
        var cbCheck = form1['cbCheck'];
        if(cbCheck.checked)
        {
            form1.appendChild(txt);
            if (para.parentNode){
                para.parentNode.removeChild(para);
            }
        }
        else if(!cbCheck.checked)
        {
            if (txt.parentNode) {   
                txt.parentNode.removeChild(txt);
                form1.appendChild(para);
            }
        }
    }
}
frm1();

如何在JS中引用时使Form元素正常工作？

1 个答案: