Html generated JavaScript not working with other JavaScript

Question

Hi I have a html that is generated by a JavaScript. I also have another separate JavaScript that suppose to hide and do other things to that html. The problem is that html is not responding to any of the other javascript's functions or methods.

I tried including Javascript within that Javascipt but that doesn't seem to work

HTML

<head>
     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
    <script src = "js/java1.js"type="text/javascript"></script>
    <script src = "js/java2.js"type="text/javascript"></script>
</head>

<body id = "example">

</body>

Javascript1

function creatething(){
    var html ='';

    html += '<div id = "button">Button <div id = "hide"> EXAMPLE </div> </div>'

    return html;

}

function insertHTML(id, html) {
    var el = document.getElementById(id);

    if(!el) {
        alert('Element with id ' + id + ' not found.');
    }

    el.innerHTML = html;
}

function run() {
    var html = creatething();

    insertHTML('example', html);
}

window.onload = run;

Javascript2

$(document).ready(function() {  

    $('#hide').hide();
});

java2.js appears to depend on a library, such a jQuery. The HTML will need to include this dependency as well. — Jonathan Lonowski
– Jonathan Lonowski, Commented Sep 24, 2014 at 16:25
Also, window.onload probably runs after the $(document).ready(...) callback. — Felix Kling
– Felix Kling, Commented Sep 24, 2014 at 16:26
When you invoke hide() does the element actually exist at that time? "JavaScript 1" seems like a really round-about way to add static markup to the page. Seems like you can just... add the markup to the page instead. — David
– David, Commented Sep 24, 2014 at 16:27
@David - I suspect this is a Minimal Complete and Verifiable example rather than a real-world case. — Stephen P
– Stephen P, Commented Sep 24, 2014 at 17:00

epascarello · Accepted Answer · 2014-09-24 16:26:26Z

3

The problen you have is order of events.

window.onload = run;  <-- Creates button
$(document).ready(function() {  <-- hides button

Document Ready fires before onload. You add the element onload and hide it onready.

It is like eating a pizza before you make it.

answered Sep 24, 2014 at 16:26

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

4 Comments

user2809321 Over a year ago

So do I have to switch the order of when the java script is being called in the head?

epascarello Over a year ago

Switching order? You need to make sure that you call the hide code after the element is added. How you do it is up to you.

user2809321 Over a year ago

switching as in calling java2 first then calling java1

epascarello Over a year ago

Make the pizza before you eat it. So the ready code needs to fire onload....And it needs to be registered after the first onload. Or move the other to onready. OR even better, set the hidden state in the CSS to start and do not run the JavaScript!!!

Knight Yoshi · Accepted Answer · 2014-09-24 16:53:35Z

0

If you have the option of adding JavaScript to either the file or away to inject it before the tab loads (e.g. browser add-on) then you can do use

  document.onreadystatechange = function () {
    if(document.readyState === 'interactive') {
      alert('interactive');
    }
    if(document.readyState === 'complete') {
      alert('complete');
    }
  }

from the MDN, "Returns "loading" while the document is loading, "interactive" once it is finished parsing but still loading sub-resources, and "complete" once it has loaded."

answered Sep 24, 2014 at 16:53

Knight Yoshi

9944 gold badges13 silver badges33 bronze badges

Collectives™ on Stack Overflow

Html generated JavaScript not working with other JavaScript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related