s0lw s0lw - 6 months ago 24
HTML Question

appendChild works outside the function but not inside

I have a problem with some part of my code.I try to create "DIV" and "P" tags using JavaScript but it is only working when I put the code outside of the function ( function is called "fo" ).When you click the button, a dialog box appears and if you click cancel, the appendChild method should put "div" and "p" tags inside the "body".

I should add that text in p tag can briefly be seen on the screen and suddenly it vanishes.My browser is 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

You faced with the default behaviour of form submit, which is navigating to page, specified in action attribute or reloading current page if action not specified.

You need to do following changes to your code to fix this:

  1. Modify submit handler registration to form.setAttribute("onsubmit", "fo(event)");
  2. Change fo() function signature to fo(event)
  3. Call event.preventDefault() at the end of if (cfm == false) condition body

So your code would look like this:

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