CODEWITHSUNDEEP
javascripthtmldjango
Simon
Simon

Reputation: 10150

Javascript - get time of link click

I have a django template page with a youtube video player that looks like this:

<script>
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: window.innerHeight - 20,
      width: window.innerWidth - 20,
      videoId: '{{video}}',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerReady(event) {
    event.target.setPlaybackQuality('hd1080');
    event.target.playVideo();
  }

  function onPlayerStateChange(event) {
    if (event.data == 0) {
        document.getElementById('choices').style.display = "block";
    }
  }

</script>

<div id="choices" class="choiceBox">
    Which direction?<br>
    <a href="/pedestrian/video/{{ subID }}/{{ condition }}/{{ trial }}/storeChoice/left/">Left</a><br>
    <a href="/pedestrian/video/{{ subID }}/{{ condition }}/{{ trial }}/storeChoice/right/">Right</a>
</div>

It all works and is nothing complicated. I have a div that is hidden until the video stops playing. What I would like to do is get the unix time in milliseconds as soon as one of the 2 hidden links are clicked and store that into a variable. Finally, Id like to attach that as a post parameter in both of the URLs (concatenate ?=time onto the end of the url)

Any idea on how this might be achieved? The issue that I can get the time as soon as the video stops, but it wont add it onto the url presumably because the url has already been written once the page loads the first time. Is it possible to modify that url after the fact?

Upvotes: 3

Views: 1701

Answers (1)

Wesley Smith
Wesley Smith

Reputation: 19571

Per your comments, you want to update the href properties of two links at a given point adding the current time as a GET var on the end of the url, then when the user clicks left or right, you want to navigate to the url stored in the clicked element's href property where python code on the receiving page will compare the time stored in the GET var to the then current time. This should work for you:

// I'm going to call modUrls when the window loads
// you could do this wherever appropriate in your code
window.onload = modUrls;

function modUrls(e){
  // get the links
  var left = document.getElementById('left');
  var right = document.getElementById('right');
  //get the time
  var time =  new Date().getTime();
  // append the time page was loaded to the urls in each link
  left.href= left.href+'?time='+ time;
  right.href= right.href+'?time='+ time;

};



//everything below this line is just for testing you can leave it all out  
var left = document.getElementById('left');
var right = document.getElementById('right');
left.addEventListener("click", directionClicked, true)
right.addEventListener("click", directionClicked, true);
function directionClicked(e){
  e.preventDefault();
  
  alert('navigating to: '+this.href)
  window.location = this.href;
  
};
<div id="choices" class="choiceBox">
    Which direction?<br>
    <a id="left" href="/pedestrian/video/{{ subID }}/{{ condition }}/{{ trial }}/storeChoice/left/">Left</a><br>
    <a id="right" href="/pedestrian/video/{{ subID }}/{{ condition }}/{{ trial }}/storeChoice/right/">Right</a>
</div>

Upvotes: 1

Related Questions