1

I have an created a page, that after 5 seconds of inactivity fires a external HTML video loop page via the innerHTML function.

When user resumes activity via mousemove or mousedown I am then replacing the video page using the innerHTML to output back to home page.

The video loop after inactivity and reloading of page work absolutely fine.

Here is a working https://jsfiddle.net/ssoney200/fs68tqzk/1/

This issue I have is with an onclick function no longer working within the dynamically output innerHTML.

I am trying to use the following code 

var timeoutID;

function setup() {
   this.addEventListener("mousemove", resetTimer, false);
   this.addEventListener("mousedown", resetTimer, false);
   this.addEventListener("keypress", resetTimer, false);
   this.addEventListener("DOMMouseScroll", resetTimer, false);
   this.addEventListener("mousewheel", resetTimer, false);
   this.addEventListener("touchmove", resetTimer, false);
   this.addEventListener("MSPointerMove", resetTimer, false);

   startTimer();
}

setup();

function startTimer() {
   // wait 5 seconds before calling goInactive
   timeoutID = window.setTimeout(goInactive, 5000);
}

function resetTimer(e) {
   window.clearTimeout(timeoutID);
   goActive();
}

function goInactive() {
    document.getElementById("content").innerHTML="<object type='text/html' data='http://bubbleweb.eu/sp-interactive/video.html' ></object>";

}

function goActive() { 

    document.getElementById("content").innerHTML='<div id="home" style="text-align:center; display:block"><img class="logo" src="http://bubbleweb.eu/sp-interactive/images/logo.jpg" /><a class="button" href=""><img src="http://bubbleweb.eu/sp-interactive/images/one-spie.jpg" /></a><a onclick="smart_fm_btn()" class="button" href="#"><img src="http://bubbleweb.eu/sp-interactive/images/smart-fm.jpg" /></a><a class="button" href=""><img src="http://bubbleweb.eu/sp-interactive/images/who-we-are.jpg" /></a></div><div onclick="smart_fm_btn()" style="text-align:center; display:none"><img class="nav" src="http://bubbleweb.eu/sp-interactive/images/nav.jpg" /><img class="logo-inner" src="http://bubbleweb.eu/sp-interactive/images/logo.jpg" /><div class="left"><a id="enegyModal" href="#"><img class="nav" src="http://bubbleweb.eu/sp-interactive/images/energy.jpg" /></a></div><div class="right"><img class="nav" src="http://bubbleweb.eu/sp-interactive/images/predictive.jpg" /></div><div id="myModal" class="modal"><!-- Modal content --><div class="modal-content"><span class="close">&times;</span><p>Test the Modal..</p></div>'

   startTimer();
}

////////// Smart button working, but not dynamically in innerHTML //////////
function smart_fm_btn() {
  var x = document.getElementById("smartfm");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }

  var y = document.getElementById("home");
  if (y.style.display === "block") {
    y.style.display = "none";
  } else {
    y.style.display = "block";
  }

}
body {
  font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
  background: #42413C;
  margin: 0;
  padding: 0;
  color: #000;
}
.container {
  width: 1080px;
  height:1960px;
  background: #FFF;
  margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
.content {
  padding: 0px 0;
}
<div class="container">
     <div id="content" class="content">     
     </div>
 </div>

to swap the display styles of both the 'home' and 'smartfm' divs on the click of 'smart-fm-btn'. This works fine if I code it in page naturally but fails when outputting dynamically via the innerHTML.

If somebody could please share some input in to what I might be doing wrong here I would be eternally grateful. I have been trying to get this to work for past 2 days! :/

Calvin Nunes
  • 6,376
  • 4
  • 20
  • 48
Jamie Stone
  • 45
  • 8
  • toggle a class or the hidden attribute – epascarello May 17 '18 at 12:20
  • 3
    "outputting dynamically via the innerHTML" means what – epascarello May 17 '18 at 12:21
  • You need to delegate. Add the onclick to the container and test the target is the link- remember to preventDefault on the link – mplungjan May 17 '18 at 12:26
  • `document.getElementById("content").onclick=function(e) { if (e.target.className=="button") { e.preventDefault(); smart_fm_btn() }` – mplungjan May 17 '18 at 12:29
  • onclick is working fine. But your resetTimer is continuously getting executed on every mouse event, which is calling resetTimer and intern calling goActive, and it is reinserting html again, over riding you display hides. – Shivaji Varma May 17 '18 at 12:34
  • I see, as the page was not reloading I was assuming that onclick was not working. But thinking about it, of course this will be reloading after mousemove and routing back through goActive to reload. :/ Is there a better work around to this then? – Jamie Stone May 17 '18 at 13:58

0 Answers0