JavaScript function and DOM

Question

I write function for manipulation with DOM objects. This function must find element with specific ID and add new child element to element with specific ID:

<html>
<head>
    <title> Text </title>
     <meta charset="utf-8">
</head>
<body id="tbody">
  <script>
    function add(){
       el = document.getElementById("testform");
       var nf=document.createElement("input");
       nf.type="text";
       el.appendChild(nf);
    }
  </script>

   <p>
     <form id="testform">
       <button onclick="add();"> create</button>
      </form>
   </p>


</body>
</html>

Element of text input doesn't create on page,but same code is placed in script tag without function-work

I think this problem related with local\global variable in JS function and scope — psyprog
– psyprog, Commented Dec 14, 2012 at 10:41

adeneo · Accepted Answer · 2012-12-14 10:41:10Z

7

You're reloading the page, and need to return false when clicking the button to stop the form from being submitted :

<html>
    <head>
        <title> Text </title>
        <meta charset="utf-8">
    </head>
    <body id="tbody">
        <script type="text/javascript">
            function add(){
                el = document.getElementById("testform");
                var nf=document.createElement("input");
                nf.type="text";
                el.appendChild(nf);
            }
       </script>
       <p>
       <form id="testform">
           <button onclick="add();return false;"> create</button>
       </form>
       </p>
   </body>
</html>

Also, sticking a form inside a paragraph seems unnecessary ?

FIDDLE

answered Dec 14, 2012 at 10:41

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matt Over a year ago

+1 The page is reloading because the default type of the <button > element is submit.

psyprog Over a year ago

Thanks for adeneo and Matt

defau1t · Accepted Answer · 2012-12-14 10:48:37Z

1

Since the Default action of button element type is submit so it submits every time you click. You can do a return false or create a label tag instead of button something like:

<html>
    <head>
    <title> Text </title>
     <meta charset="utf-8">
    </head>
    <body id="tbody">
    <script>
    function add(){
        el = document.getElementById("testform");
        var nf=document.createElement("input");
        nf.type="text";
        el.appendChild(nf);
    }
    </script>

   <p>
   <form id="testform">
   <label onclick="add();"> create</label>
   </form>
   </p>


   </body>
   </html>

DEMO

answered Dec 14, 2012 at 10:48

defau1t

10.6k2 gold badges37 silver badges47 bronze badges

Collectives™ on Stack Overflow

JavaScript function and DOM

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related