No announcement yet.

onclick function not working in innerHTML

  • Filter
  • Time
  • Show
Clear All
new posts

  • onclick function not working in innerHTML

    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

    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 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! :/

    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);
        function startTimer() {
           // wait 5 seconds before calling goInactive
           timeoutID = window.setTimeout(goInactive, 5000);
        function resetTimer(e) {
        function goInactive() {
            document.getElementById("content").innerHTML="<object type='text/html' data='' ></object>";
        function goActive() { 
            document.getElementById("content").innerHTML='<div id="home" style="text-align:center; display:block"><img class="logo" src="" /><a class="button" href=""><img src="" /></a><a onclick="smart_fm_btn()" class="button" href="#"><img src="" /></a><a class="button" href=""><img src="" /></a></div><div onclick="smart_fm_btn()" style="text-align:center; display:none"><img class="nav" src="" /><img class="logo-inner" src="" /><div class="left"><a id="enegyModal" href="#"><img class="nav" src="" /></a></div><div class="right"><img class="nav" src="" /></div><div id="myModal" class="modal"><!-- Modal content --><div class="modal-content"><span class="close">&times;</span><p>Test the Modal..</p></div>'
        ////////// Smart button working, but not dynamically in innerHTML //////////
        function smart_fm_btn() {
          var x = document.getElementById("smartfm");
          if ( === "none") {
   = "block";
          } else {
   = "none";
          var y = document.getElementById("home");
          if ( === "block") {
   = "none";
          } else {
   = "block";

    HTML Code:
        <div class="container">
             <div id="content" class="content">     
    Rent Villas Nerja Spain Rent Villas in Nerja, Spain
    Deep House Radio London UK Blend stream the very best deep and funky house 24/7!

  • #2
    Hi there sstoney2001,

    unfortunately, HTMLForums is dead in all but name.

    I would suggest that you take your problem to a live forum such as...

    ~ the original bald headed old fart ~