innerHTML javascript changing

Question

I am trying to make this code work, I want the innerHTML to be changed but It's instantly changing and gets back to its initial state . Any help ?

<!DOCTYPE html>
<html>
    <head>
        <script>
            function click_me(){ 
                alert('fdsfs');
                var tweety=document.getElementById('text_this').innerHTML;
                alert(tweety);
                var text_area="<input type=text value='"+tweety+"'>";
                alert(text_area);
                document.getElementById('text_this').innerHTML=text_area; 
             }
        </script>
    </head>
<body>
    <form name="form1">
        <table border=1>
            <tr>
                <td>
                    <div id="text_this">123</div>
                </td>
                <td>
                    <button onclick="click_me();">Edit</button>
                </td>
            </tr>
</body>
</html>

Harry · Accepted Answer · 2013-09-28 12:54:33Z

4

Your form is getting submitted. Add a return false; to your button onclick event.

<button onclick="click_me(); return false;">Edit</button>

Or, make the button type='button' (This is the better option)

<button onclick="click_me();" type='button'>Edit</button>

The reason is because the button type is submit by default if a type is not specified.

From MDN,

submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

edited Sep 28, 2013 at 12:54

answered Sep 28, 2013 at 12:39

Harry

90.1k26 gold badges216 silver badges224 bronze badges

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

Comments

RobG · Accepted Answer · 2013-09-28 12:56:43Z

1

<!DOCTYPE html>
<html>
  <head>
    <script>
    function click_me(){ 
      alert('fdsfs');
      var tweety=document.getElementById('text_this').innerHTML;
      alert(tweety);
      var text_area="<input type=text value='"+tweety+"'>";
      alert(text_area);
      document.getElementById('text_this').innerHTML=text_area; 
    }
    </script>
  </head>
  <body>
    <form name="form1">
      <table border=1>
        <tr>
          <td><div id="text_this">123</div></td>
          <td><button onclick="click_me();return false;">Edit</button></td>
        </tr>
      </table>
    </form>
  </body>
</html>

added a return false statement to the onclick event. without it, the form gets submitted and the page reloads

jsfiddle here

edited Sep 28, 2013 at 12:56

RobG

148k32 gold badges180 silver badges216 bronze badges

answered Sep 28, 2013 at 12:37

Nicolas Straub

3,4096 gold badges24 silver badges43 bronze badges

8 Comments

11684 Over a year ago

I don't believe a <button> does submit the page.

Rogue Over a year ago

Buttons' actions are browser-specific. Some do submit forms: w3schools. It's better to use <input> tags in that case.

Harry Over a year ago

@Rogue: Yes, default seems to be submit. I have posted the MDN link and content in my answer above.

Harry Over a year ago

@11684: Strange, but in codepen even if I add a form it is not getting submitted but in jsFiddle it does. There must be some difference between those two. But I still think MDN wouldn't be wrong.

RobG Over a year ago

@11684—while MDN isn't wrong about that, it's just a community Wiki and is wrong and in need of update about some things.

|

Collectives™ on Stack Overflow

innerHTML javascript changing

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related