Встроенный Javascript не выполняется

У меня есть следующие два почти идентичных блока Javascript, встроенных в мой HTML (я знаю, я знаю, но я отчаянно ...

Блок занятости:

    <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>

Учебный блок:

<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>

И, наконец, вывод журнала консоли ...

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 creata€¦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 Ja€¦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

Конечным результатом является то, что, пока блок подготовки отображается на последней веб-странице, блок занятости не работает, а из консоли.log оказалось, что Javascript занятости не работает. Я прошел через это несколько тысяч раз и даже попросил другого разработчика посмотреть на него, и мы оба подошли к пустым.

Кто-нибудь видит, где я прищурился?

javascript,html,

0

Ответов: 1

2

Проблема заключается в том, что вы объявляете все свои переменные и функции в одной области. Поэтому, когда выполняется код в обучающем блоке, он перезаписывает xmlhttpпеременную и в результате выполняется только код в этом блоке. ou может либо переименовать xmlhttpв учебный блок на что-то другое или, лучшее решение, использовать шаблон модуля и поместить оба блока в отдельные IIFE (сразу вызываемое выражение функции):

<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>

Таким образом, у вас будут отдельные области и отсутствие конфликтов имен.

JavaScript, HTML,
Похожие вопросы
Яндекс.Метрика