Announcement

Collapse
No announcement yet.

onclick function not working in innerHTML

Collapse
X
  • 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 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 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! :/





    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";
          }
    
        }



    HTML Code:
        <div class="container">
             <div id="content" class="content">     
             </div>
         </div>
    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 ~

    Comment

    Working...
    X