Display date with Javascript function while updating URL

Question

So I am doing something with my Arduino Uno where when a button is clicked on my webserver the URL appends '?feed' to the end of it (but is still the same current page). This is absolutely necessary for my Arduino sketch because this is when it knows to rotate my servo.

ANYWAYS. However, I want underneath the button to display the date it was clicked. The problem with this is when the button is clicked, it shows the date for a split second and then reloads the page to append to the URL.

HTML & Javascript (sorry if it's sloppy):

<a href="?feed"><button onclick="displayDate()">FEED ME!</button></a>

<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

Seems like you'd have to pass the date as well, or use the HTML5 URI spec to adjust the url in the address bar without navigating or refreshing the page ... — Mike Lyons
– Mike Lyons, Commented Mar 30, 2015 at 22:23
When you click on the button, you are sent to a new page (even if it is the same page). So your code won't run — Ibu
– Ibu, Commented Mar 30, 2015 at 22:23
FYI: button can not be inside an a, that’s invalid HTML. — C3roe
– C3roe, Commented Mar 30, 2015 at 22:24
@CBroe: You are right. Relevant spec is here: w3.org/TR/html5/text-level-semantics.html#the-a-element "The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)." — recursive
– recursive, Commented Mar 30, 2015 at 22:27
@MikeLyons: How would I go about passing the date in the function? — Kujo
– Kujo, Commented Mar 30, 2015 at 22:31

Artyom Neustroev · Accepted Answer · 2015-03-30 22:32:44Z

1

You might want to use AJAX request with combination of history.pushState. Something like this:

window.onload = function() {
  document.getElementsByClassName('feed')[0].onclick = function() {
    document.getElementById("demo").innerHTML = Date();
    var req = new XMLHttpRequest();
    req.open('GET', '?feed', true);
    req.send(null);
    window.history.pushState(null, null, '?feed');
  };
};

<button class="feed">FEED ME!</button>
<p id="demo"></p>

answered Mar 30, 2015 at 22:32

Artyom Neustroev

8,7355 gold badges36 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

Display date with Javascript function while updating URL

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related