appendChild works outside the function but not inside

Question

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 1

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:

Modify submit handler registration to form.setAttribute("onsubmit", "fo(event)");
Change fo() function signature to fo(event)
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>

appendChild works outside the function but not inside

Question

1 answers

solution1
0 ACCPTED 2016-05-14 18:37:02

appendChild works outside the function but not inside

Question

1 answers

solution1 0 ACCPTED 2016-05-14 18:37:02

solution1
0 ACCPTED 2016-05-14 18:37:02