Writing text on “div” using JavaScript

Question

I\'m having some trouble whenever I want to add some text to my div tag, here\'s my code:

        
                      

              相关标签:
       
      

Answer 1

When you click on the submit button the form is submitted, causing the whole page to reload. You need to return false from the onclick of the submit button to prevent it:

<input type="submit" value="Ready!" onclick="writeComment(); return false;" />

Or, if you don't want the button to ever submit the form change type="submit" to type="button".

PS. It's bad practice to use the onclick attribute. Instead bind a handler to the click event using pure JS.

Answer 2

You'll have to prevent your form from submitting:

<input type="submit" value="Ready!" onClick="writeComment(); return false;" />

Answer 3

It is because you are submitting the form.

Quick fix:

<input type="submit" value="Ready!" onClick="writeComment()" />

to

<input type="button" value="Ready!" onClick="writeComment()" />

In addition, you are able to prevent the default action of an input. Basically telling the browser the you are going to handle the action with preventDefault:

function writeComment(e) {
    var comment = document.forma.commentUser.value;
    alert(comment);

    document.getElementById('comments').innerHTML = comment;
    e.preventDefault();
    return false;
}

Answer 4

Its making another request to the server, which is causing the page to be rendered again.

Just return false from writeComment.

Answer 5

Or another option is to convert your submit into a button and take it out of the form, buttons can now exist outside of forms and from the code you pasted I don't see why you have to use a form, this will mean that your page isn't reloaded when you click on the "Ready" button.

Answer 6

What's happening is your form is submitting, the page is refreshing, and the div is going back to its pre-JavaScript-set content.

Try swapping the type='submit' to 'button' on the button.