javascript script block in html page works in header but not from external file
Question
I have a simple javascript script in my HTML page that works when included in the header, but when I try to put it in a separate file and import it, it doesn't do anything.
Here's the html page:
<!DOCTYPE html> <html> <head> <meta content="en-us" http-equiv="Content-Language" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <style> div#test{ border:#000 1px solid; padding:10px 40px 40px 40px; } </style> <script type="text/javascript" src="/js/script.js"> </script> </head> <body> <h2 id="test_status"></h2> <div id="test"></div> </body> </html>
and my script.js code:
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0; var questions = [ ["What is 10 + 4?", "12", "14", "16", "B"], ["What is 20 - 9?", "7", "13", "11", "C"], ["What is 7 x 3?", "21", "24", "25", "A"], ["What is 8 / 2?", "10", "2", "4", "C"] ]; function _(x) { return document.getElementById(x); } function renderQuestion() { test = _("test"); if (pos >= questions.length) { test.innerHTML = "<h2>You got " + correct + " of " + questions.length + " questions correct</h2>"; _("test_status").innerHTML = "Test Completed"; pos = 0; correct = 0; return false; } _("test_status").innerHTML = "Question " + (pos + 1) + " of " + questions.length; question = questions[pos][0]; chA = questions[pos][1]; chB = questions[pos][2]; chC = questions[pos][3]; test.innerHTML = "<h3>" + question + "</h3>"; test.innerHTML += "<input type='radio' name='choices' value='A'> " + chA + "<br>"; test.innerHTML += "<input type='radio' name='choices' value='B'> " + chB + "<br>"; test.innerHTML += "<input type='radio' name='choices' value='C'> " + chC + "<br><br>"; test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>"; } function checkAnswer() { choices = document.getElementsByName("choices"); for (var i = 0; i < choices.length; i++) { if (choices[i].checked) { choice = choices[i].value; } } if (choice == questions[pos][4]) { correct++; } pos++; renderQuestion(); } window.addEventListener("load", renderQuestion, false);
2 answers
solution1
1 2015-09-07 06:18:37
You need to check if the path of js file is is ok or not. It seems file is not found at location you provided.You may check console error in Chrome browser developer tool s if
file not found error ( 404 error ) is coming or not.
solution2
1 ACCPTED 2015-09-07 06:28:56
Just set src="js/script.js">. Everything will be fine.
<script type="text/javascript" src="js/script.js"> </script>
The reason of this bug is "/" will search the Disk root folder for script.js.
Use src="/js/script.js"
- code folder: C:/Programs/code
- search folder: C:/js/script.js
Use src="js/script.js"
- code folder: C:/Programs/code
- search folder: C:/Programs/js/script.js
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.