如何让Form元素在JS中引用时正确工作？

Question

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

当用户单击该按钮时，如果选中，它将在其下方创建一个文本框，如果没有选中，它将删除它并替换为文本节点。这是代码：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/

函数声明需要括号。你的“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();

如何让Form元素在JS中引用时正确工作？

问题描述投票：0回答：1

1个回答

最新问题

如何让Form元素在JS中引用时正确工作？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1