appendChild在函數外部工作，但不在函數內部

Question

我的代碼部分有問題。我嘗試使用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>

Answer 1

你面對提交表單的默認行為，這是瀏覽到另一個頁面，在規定action的屬性，或者重新加載當前頁面action沒有規定。

您需要對代碼進行以下更改以解決此問題：

修改提交處理程序注冊為form.setAttribute("onsubmit", "fo(event)");
將fo()函數簽名更改為fo(event)
在if (cfm == false)條件主體結尾處調用event.preventDefault()

因此，您的代碼如下所示：

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

appendChild在函數外部工作，但不在函數內部

問題描述

1 個解決方案

解決方案1
0 已采納 2016-05-14 18:37:02

appendChild在函數外部工作，但不在函數內部

問題描述

1 個解決方案

解決方案1 0 已采納 2016-05-14 18:37:02

解決方案1
0 已采納 2016-05-14 18:37:02