DOM element disappearing immediately after update

form disappears after submit javascript
javascript innerhtml append
addeventlistener
onclick preventdefault
textarea value

I have the following javascript function that updates a text within a div when a button is clicked (using an onclick() event) It works, but it immediately changes back to the old text.

function func()
{
    var text = document.getElementById("text");
    text.innerHTML = "Changed";
};

The HTML

<body>
    <form>
        <input type="submit" value="Add Text" onclick="func()"/>
    </form>
    <div id="text">
        Text to Change
    </div>
</body>

What am I missing? I also tried returning 'false' from the function but no luck.

You are actually submitting the form. Prevent that by adding return false to the onclick attribute:

<input type="submit" value="Add Text" onclick="func(); return false;"/>

Why is my new list element disappearing? : learnjavascript, I have created a function to add a new task. The task seems to get added OK to my task list - it's just that it appears there for a split second and then disappears? edit: My Vanilla JS dom manipulation is pretty hazy. related to Javascript I created a list of a few job openings for developers that auto-updates every day. Questions: I’m using bootstrap’s modal plugin in rails The website says I can gain the function without write javascript. I add the following line in my HTML(in slim): div#makeDream.modal.hide.fade div.modal-header a.close data-dismiss='modal' h3 Hello World! div.modal-body div.modal-footer a data-toggle='modal' data-target='#makeDream' Button However, after I clicking the Button. the

The form submits causing the page to refresh and reload the original content.

Try returning false on a form submit handler to prevent the default action:

<form onsubmit="return false;">

If I may suggest, avoid inline event handlers altogether. Instead use the modern events API with the much nicer addEventListener:

<body>
    <form id='mainForm'>
        <input type="submit" value="Add Text"/>
    </form>
    <div id="text">
        Text to Change
    </div>
</body>

Javascript:

var form = document.getElementById("mainForm");
var text = document.getElementById("text"); // probably not a very good id!
form.addEventListener("submit",function(e){ 
    text.innerHTML = "Hello!";
    e.preventDefault();
});

How to Fix Randomly Disappearing Absolutely-Positioned Elements , The HTML elements are coded in the order specified, i.e. content blocks it's coded immediately before or after a floated element (it's next to a� Called after the element’s DOM has been updated the first time, immediately before updated is called. Implement firstUpdated to perform one-time work after the element’s template has been created. Example: Focus an input element on first update

You are using input type="submit" inside Form tag , clicking this button will refresh the same page .

try

    <input type="button" value="Add Text" onclick="func()"/>

<div id="text">
    Text to Change
</div>

or remove form tag

DOM elements created with JavaScript disappear after any update , I use Atlassian Web-Resource Webpack Plugin + React for my Jira server plugin. After loading the issue view, react renders my app into� After some searching it appears that Ajax is my best bet, but I have never worked with JQuery before. Here is the code snippet from the page containing the data I’m looking to refresh when a

.stop(), slideUp() example, the element would be immediately hidden. The callback function Any subsequent animations would start at a new "half-way" state, sometimes resulting in the element disappearing. To observe the new <! doctype html>. I'm using Bootstrap 2.0 and am trying to use a Modal for displaying a Markdown cheat sheet. I've set up a link to display the modal but when I click it, the modal appears briefly and then immediately disappears again.

Modifying the document, Here we'll see how to create new elements “on the fly” and modify the existing page content. html into elem , at the end,; "afterend" – insert html immediately after elem . Let's make our message disappear after a second:. Okay, so now that we can clearly see that the DOM is not updated immediately after we make a change to a data property, when is it updated? There is a handy method available on the global Vue object named nextTick. This method takes a callback as its argument, which is invoked the next time Vue has updated the DOM.

Introduction to browser events, Here's a list of the most useful DOM events, just to take a look at: Mouse events: click – when the mouse clicks on an element (touchscreen devices HTML- attribute then the browser reads it, creates a new function from the Add JavaScript to the button to make <div id="text"> disappear when we click it. The problem is caused by an IE bug that hides an absolutely-positioned element when it’s coded immediately before or after a floated element (it’s next to a floated sibling).

Comments
  • This works! Why does the 'return false' not work when it's in a function? Thanks!
  • @kassold you need to also do return func() as well as return false; in the function, but that's generally a much worse approach than doing addEventListener anyway.
  • What does the value false or true mean here?
  • In fact, I tried that but it doesn't work. I will update my question.