我的 HTML 中嵌入了以下两个几乎相同的 Javascript block (我知道,我知道,但我越来越绝望了......
就业 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>
训练 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>
最后,控制台日志输出...
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
最终结果是,虽然训练 block 出现在最终网页中,但就业 block 却没有出现,并且从 console.log 中可以看出就业 Javascript 并未运行。我对此进行了数千次研究,甚至要求另一位开发人员查看它,但我们都一无所获。
有人看出我哪里搞砸了吗?
最佳答案
问题实际上在于,您在同一范围内声明了所有变量和函数。因此,当执行训练 block 中的代码时,它会覆盖 xmlhttp
变量,因此仅执行该 block 中的代码。您可以将训练 block 中的 xmlhttp 重命名为其他名称,或者更好的解决方案是使用模块模式并将两个 block 放入单独的 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 - 嵌入的 Javascript 不执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51211512/