CODEWITHSUNDEEP
javascripthtml
C.J.
C.J.

Reputation: 16081

Setting innerText with Javascript only applies momentarily

So I am learning Javascript, and I'm having a problem:

I can set the innerText of a paragraph element. But immediately the web-browser undo's my work!! Meaning the web-page completely reverts back to the state it was in as if I had loaded the page afresh.

<html>
    <body>
        <form>
            <input type="submit" onclick="GetCurrentLocation()" value="Get Current URL" />
        </form>
        <p id="CurrentURL">Current URL:</p>

        <script>
            function GetCurrentLocation()
            {
                var myCurrentLocation = window.location.href;
                var curLocP = document.getElementById("CurrentURL");
                curLocP.innerText = "Current URL: " + myCurrentLocation;
            }
        </script>
    </body>
</html>

So above I set the innertext in the last line of the function, and in the UI I can see the correct, expected text:

Current URL: C:\Users...\Projects\test.html

flash and then disappear simply leaving me with:

Current URL:

I'm running this on Google Chrome.

Upvotes: 0

Views: 111

Answers (3)

Ergec
Ergec

Reputation: 11824

Browser submits the form and refreshes the page. That's why you loose changes. Change your input type from submit to button

<input type="button" onclick="GetCurrentLocation()" value="Get Current URL" />

Upvotes: 3

damian
damian

Reputation: 5444

The browser submits the form that's why the refresh happens. If you need to use a submit button you can use event.preventDefault()

function GetCurrentLocation(event)
{
    event.preventDefault();
    var myCurrentLocation = window.location.href;
    var curLocP = document.getElementById("CurrentURL");
    curLocP.innerText = "Current URL: " + myCurrentLocation;
}

Upvotes: 1

j08691
j08691

Reputation: 207901

Add a return:false to your JavaScript to prevent the form from being submitted and reloading the page (and making it look like the change disappears when in reality it's just reloading):

<input type="submit" onclick="GetCurrentLocation();return false" value="Get Current URL" />

jsFiddle example

Upvotes: 1

Related Questions