代码之家 › 专栏 › 技术社区 › s0lw

appendChild在函数外部工作,但不在函数内部工作

appendchild html javascript

s0lw · 技术社区 · 8 年前

我的部分代码有问题。我尝试使用JavaScript创建“DIV”和“P”标记,但只有当我将代码放在函数外部(函数称为“fo”)时,它才有效。当您单击按钮时,会出现一个对话框,如果您单击取消,appendChild方法应该将“div”和“p”标记放在“body”中。

我应该补充一点,p标记中的文本可以在屏幕上短暂看到,然后突然消失。我的浏览器是Google Chrome。

<html>
<body>
</body>
<script> 
function give(){
form = document.createElement("FORM");
input = document.createElement("INPUT");
input.setAttribute("type", "submit");
input.setAttribute("value", "button");
form.setAttribute("id", "abc");
form.setAttribute("onsubmit", "fo()");
textarea = document.createElement("TEXTAREA");
textarea.setAttribute("id", "txt");
form.appendChild(input);
form.appendChild(textarea);
document.body.appendChild(form);
document.getElementById("abc").method = "post";
}
  give();
  function fo(){
a = document.getElementById("txt").value; 
cfm = confirm("Are you sure you want changes");
if (cfm == false ) {
div = document.createElement("DIV");
p = document.createElement("P");
ptxt = document.createTextNode("test");
p.setAttribute("id", "centr");
p.appendChild(ptxt);
div.appendChild(p);
document.body.appendChild(div);
}
}
/*When this part of code is outside function fo() , appendChild works correctly
  div = document.createElement("DIV");
  p = document.createElement("P");
  ptxt = document.createTextNode("Outside the function it works");
  p.setAttribute("id", "centr");
  p.appendChild(ptxt);
  div.appendChild(p);
  document.body.appendChild(div); 
  */
  </script>
  </html>

1 回复 | 直到 8 年前

mshipov 8 年前

您面临表单提交的默认行为,即导航到页面,在中指定 action 属性或重新加载当前页面,如果 行动 未指定。

您需要对代码进行以下更改才能修复此问题:

将提交处理程序注册修改为 form.setAttribute("onsubmit", "fo(event)");
改变 fo() 函数签名至 fo(event)
呼叫 event.preventDefault() 在…的结尾 if (cfm == false) 条件主体

因此,您的代码如下所示:

<html>
<body>
</body>
<script>
    function give(){
        form = document.createElement("FORM");
        input = document.createElement("INPUT");
        input.setAttribute("type", "submit");
        input.setAttribute("value", "button");
        form.setAttribute("id", "abc");
        form.setAttribute("onsubmit", "fo(event)");
        textarea = document.createElement("TEXTAREA");
        textarea.setAttribute("id", "txt");
        form.appendChild(input);
        form.appendChild(textarea);
        document.body.appendChild(form);
        document.getElementById("abc").method = "post";
    }
    give();
    function fo(event){
        a = document.getElementById("txt").value;
        cfm = confirm("Are you sure you want changes");
        if (cfm == false ) {
            div = document.createElement("DIV");
            p = document.createElement("P");
            ptxt = document.createTextNode("test");
            p.setAttribute("id", "centr");
            p.appendChild(ptxt);
            div.appendChild(p);
            document.body.appendChild(div);
            event.preventDefault();
        }
    }
</script>
</html>