CODEWITHSUNDEEP
javascripthtml
Tigger
Tigger

Reputation: 119

Embedded Javascript not executing

I have the following two nearly identical blocks of Javascript embedded in my HTML (I know, I know, but I'm getting desperate...

Employment Block:

    <script>
    var xmlhttp = new XMLHttpRequest();
    var jobs = "employment.json";
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4 && xmlhttp.status == 200) {
            var json_in = JSON.parse(xmlhttp.responseText);
            console.log("Showing json_in");
            console.log(json_in);
            load_json(json_in);
         }
     }
     xmlhttp.open("GET", jobs, true);
     xmlhttp.send();

     function load_json(data) {
         console.log("Showing Employment data");
         console.log(data);
         var out = "";
         var i;
         for (i = 0; i < data.jobs.length; i++) {
             out += "<tr><td id = \"data-column\" width=\"30%\">" + data.jobs[i].Name + "<br>" + data.jobs[i].JobTitle + "<br>" + data.jobs[i].Dates + "</td><td id = \"desc-column\" width=\"70%\">" + data.jobs[i].Description + "</td></tr>";
         }
         document.getElementById("jobs").innerHTML = out;
      }
 </script>

Training Block:

<script>
  var xmlhttp = new XMLHttpRequest();
  var url = "training.json";

  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState === 4 && xmlhttp.status == 200) {
      var json_in = JSON.parse(xmlhttp.responseText);
      load_json(json_in);
    }
  }
  xmlhttp.open("GET", url, true);
  xmlhttp.send();

  function load_json(data) {
    console.log("Showing Training data");
    console.log(data);
    var out = "";
    var i;
    for (i = 0; i < data.courses.length; i++) {
                        out += "<tr><td width=\"20%\">" + data.courses[i].Course + "</td><td width=\"10%\">" + data.courses[i].Website + "</td><td width=\"35%\">" + data.courses[i].URL + "</td><td width=\"35%\">" + data.courses[i].Description + "</td></tr>";
     }
     document.getElementById("train").innerHTML = out;
  }
</script>

And last, the Console log output...

Showing Training data
VM286:1 XHR finished loading: GET "https://lekrigbaum.com/pages/employment.json".
(anonymous) @ VM286:1
(anonymous) @ resume.html:77
resume.html:157 {courses: Array(8)}courses: Array(8)0: {Course: "Web Development", Website: "Udacity", URL: "https://www.udacity.com/course/web-development--cs253", Description: "Basics of using HTML, CSS, and Javascript to creat…sites.  Note: This cource has since ben modified."}1: {Course: "Intro to HTML and CSS", Website: "Udacity", URL: "https://in.udacity.com/course/intro-to-html-and-css--ud304", Description: "Introduction to HTML, CSS, design concepts and the Document Object Model"}2: {Course: "Javascript Basics", Website: "Udacity", URL: "https://in.udacity.com/course/javascript-basics--ud804", Description: "Introduction to Javascript programming and using J…ipt to interact with the DOM to modify web pages."}3: {Course: "Responsive Web Design Fundamentals", Website: "Udacity", URL: "https://www.udacity.com/course/web-development--cs253", Description: "Principles of responsive web site design and how to create layouts."}4: {Course: "JavaScript: Understanding the Weird Parts", Website: "Udemy", URL: "https://www.udemy.com/understand-javascript/", Description: "An in-depth examination of Javascript features."}5: {Course: "Bulding Responsive Real World Websites with HTML5 and CSS", Website: "Udemy", URL: "https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/", Description: "Extensive exercises in building real-world websites."}6: {Course: "Go Programming Language", Website: "Udemy", URL: "https://www.udemy.com/learn-how-to-code/", Description: "Extensive introduction to the Go programming language."}7: {Course: "Web Development with Google's Go Programming Language", Website: "Udemy", URL: "https://www.udemy.com/go-programming-language/", Description: "Using Go to replace web server.  Includes use of Go templates and other features."}length: 8__proto__: Array(0)__proto__: Object
VM286:1 XHR finished loading: GET "https://lekrigbaum.com/pages/training.json".
(anonymous) @ VM286:1
(anonymous) @ resume.html:153

The end result is that while the Training Block appears in the final webpage, the employment block does not, and from the console.log it would appear that the Employment Javascript is not running. I gone over this a few thousand times and even asked another developer to look at it, and we both came up empty.

Does anyone see where I screwed up?

Upvotes: 0

Views: 1403

Answers (1)

Andrzej Smyk
Andrzej Smyk

Reputation: 1724

The problem lies in fact, that you declare all your variables and function in the same scope. Therefore, when code in training block is executed it overwrites xmlhttp variable and as a result only code in that block is executed. ou can either rename xmlhttp in training block to something other or, a better solution, use module pattern and put both block in separate IIFEs (immediately-invoked function expression):

<script>
(function () {
  var xmlhttp = new XMLHttpRequest();
  var url = "training.json";

  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState === 4 && xmlhttp.status == 200) {
      var json_in = JSON.parse(xmlhttp.responseText);
      load_json(json_in);
    }
  }
  xmlhttp.open("GET", url, true);
  xmlhttp.send();

  function load_json(data) {
    console.log("Showing Training data");
    console.log(data);
    var out = "";
    var i;
    for (i = 0; i < data.courses.length; i++) {
                        out += "<tr><td width=\"20%\">" + data.courses[i].Course + "</td><td width=\"10%\">" + data.courses[i].Website + "</td><td width=\"35%\">" + data.courses[i].URL + "</td><td width=\"35%\">" + data.courses[i].Description + "</td></tr>";
     }
     document.getElementById("train").innerHTML = out;
  }
})();
</script>

This way, you will have separate scopes and no names collision.

Upvotes: 2

Related Questions