Javascript未正确链接到我的HTML

Question

I can't seem to get my java script to appear due to not linking correctly. 由于未正确链接，我似乎无法显示我的Java脚本。

I don't really understand what is wrong with my linking. 我不太了解我的链接出了什么问题。 I'm trying to make a website with a functioning quiz, but the since the java wont show up the whole thing goes kaput. 我正在尝试使网站具有正常的测验，但由于Java不会显示整个内容，因此请进行kaput。

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>Web Quiz</title>
<link type="text/css" rel="stylesheet" href="_assets/_css/quiz.css" media="screen">
<script type="text/javascript" src="jquery.js"></script>            
<script language="JavaScript" type="text/javascript" src="/_assets/_js/quiz2.js"></script>    
</head>    
<body>
<h1>Web Quiz</h1>
<p>Test your Knowledge</p>
<h2 id="test_status"></h2>
<div id="test"></div>
</body> 
</html>

Javascript Java脚本

 var pos = 0, area, position, question, choice, choices, chA, chB, chC, chD, correct = 0; 
    var questions = [ 
        [ "Where was Sir Tim Berners-Lee born and in what year?", "London,1955", "California 1957", "Wales,1957", "Ireland,1955", "A" ],
        [ "Who is credited for invented the world wide web?", "Robert Cailliau", "Sir-Tim Berners-Lee", "Both a and b", "Vint Cerf", "A" ],
        [ "Who helped Tim develop the world wide web?", "He didn’t have any help", "Steve Jobs", "Robert Cailliau.", "Vint Cerf", "C" ],
        [ "What was the original intended purpose of the internet?", "A way to connect everyone in the world", "Being able to contact troops stationed in other countries", "Allow all of the government officials to contact each other", "A network to link all prominent scientists and university professors of America", "D" ],
        [ "Who developed the original Internet?", "The FBI", "The CIA", "The US department of Defense", "Bureau of Intelligence and Research", "C" ],
        [ "What event led to the development of the Internet?", "The USA creates ARPA ", "Sputnik launching", "Cold War", "World War 2", "B" ],
        [ "How does Packet Switching work?", "Breaks files into smaller chunks then sends the file", "Attaches other bigger files then sends it", "It refuses to send the file", "The file is sent to Barack Obama", "A" ],
        [ "What does IP stand for?", "Internet Prayer", "Internet Planning", "Internet Protocol", "Internet Please", "C" ],
        [ "What is the purpose for FTP?", "To send computer files from one host to another", "To delete sent files", "To send files to Barack Obama", "To 'Fly Through Ponds'", "A" ],
        [ "When was HTML5 released?", "2000", "2016", "2012", "2014", "C" ],
        [ "How do you insert a header 1 tag in HTML?", "header 1", "h1", "h1", "None of the above", "D" ],
        [ "What should the last tag be in your HTML?", "/body", "/title", "/html", "/", "C" ],
        [ "What is the correct way to insert JavaScript tags in HTML?", "None of these", "Javascript /JavaScript", "/js", "'style'", "A" ],
        [ "What's the first thing you type when starting an HTML page?", "docTYPE html", "doctype htm", "DOCtype html", "None of the above", "D" ],
        [ "How do you link an external CSS in HTML?", "href='assets/css/(css name).css'", "href='assets/css/(css_name).css'", "href='assets/css/(css_name).css'", "href='assets/css/(css_name).js'", "A" ],
        [ "What will happen using the pimpmyride tag?", "Creates a new pimpmyride HTML tag", "Nothing because it is not a valid tag", "A car appears on your screen and drives you away", "Pimps your car for you in HTML", "B" ],
        [ "The div tag does what?", "Creates a container on your HTML which holds a chunk of content", "Targets multiple elements", "Targets all elements", "Targets all but one element", "C" ],
        [ "How do you close a tag?", "Add '/'' before the tag", "Add '/' after the tag", "Add '/' after the first letter", "You don't at all", "A" ],
        [ "What should go first in the HTML page?", "internal CSS page", "div tags", "content", "Nyan Cat", "C" ],
        [ "How do you assign the id 'flavor' to a div' tag?", "div's name is 'flavor'", "div id='flavor'", "/div id='flavor'", "None of the above", "B" ],
        [ "What is the correct HEX code for RED?", "red", "#FF0000", "#F00000", "#0000FF", "B" ],
        [ "What does CSS stand for?", "Cascading Style Sheets", "Changing Sturdy Stance", "Cascadng Style Sheets", "Corona Still Sober", "A" ],
        [ "What is CSS used for?", "Many Things", "Styling HTML pages", "Styling your clothes", "Styling only one element in JavaScript", "B" ],
        [ "How do you target the body element in CSS?", "Come here beautiful", "'/body'", "b", "body{}", "D" ],
        [ "What can CSS be used for other than making your HTML pretty?", "Add pictures", "Change the color of your text", "Create animations for your buttons or content", "Resize images", "C" ],
        [ "Which of these is correct syntax?", "body {margin is 10px}", "body margin: 10px;", "body {margin: 10px;}", "body = margin: 10px;}", "C" ],
        [ "When should the CSS load in an HTML page?", "Before the content", "After the content", "Before the double rainbow", "After the double rainbow", "B" ],
        [ "What's the difference between padding and margin?", "They're the same", "Padding is the spacing between the content and the border while margin is the space outside the border", "Margin the the the space between the content and the border while the margin is the space outside the border", "Margin is the space to the left and right of the content while padding is the space above and below", "B" ],
        [ "How do you set a padding of 10 pixels ABOVE the content?", "{margin-top: 10px;}", "{margin-up: 10px;}", "{margin-above 10px;}", "{margin-top 10px;}", "A" ],
        [ "How do you target the div class in CSS?", "#div", "class=div", ".div", "div class", "C" ],
        [ "What's a good habit in JavaScript?", "Place 'var' in front of every variable", "Place 'var' after every variable", "Place 'var' at the end of the body tag", "Always put a semicolon at the end of your code", "D" ],
        [ "What's the purpose of 'if else' statements in JavaScript?", "To report others of hacking", "To execute certain code if the conditions are right", "To execute code after an earthquake", "To execute code if HTML allows it ", "B" ],
        [ "What happens when: var myArray = [1, 2, 3, 4, 5]; var newArray = myArray.shift();", "1, 2, 3, 4", "2, 3, 4, 5", "5, 4, 3, 2, 1", "2, 1, 4, 5", "B" ],
        [ "What does 'pop' do in JavaScript?", "Removes the last item in an array", "Removes the first item in an array", "Adds an item to the beginning of an array", "Adds an item to the end of an array", "A" ],
        [ "What returns when: var myArray = [1, 2, 3, 4, 5]; var newArray = myArray.push; var otherArray = ['Sober']; console.log(otherArray);", "Sober", "1,2,3,4,5", "2,3,4,5", "Nothing at all", "A" ],
        [ "Which of these is a function?", "{return a * b;}", "functionn {return ab;}", "function myFunction(a, b) {return a * b;}", "padding: 25px;", "C" ],
        [ "What keys do you press to turn all highlighted text into comments on a MAC?", "Command + Tab", "Command + Backslash ", "Command + Forward Slash", "Alt + Shift", "C" ],
        [ "What can you do to check for any errors in your code?", "Hack it", "Check the developers console in your browser", "If, else statement", "console.log();", "B" ],
        [ "What does a prompt do?", "It assures the user that Siri is cool", "It asks the user to type 'Pikachu'", "It prompts the user to type only numbers", "It prompts the user to type something into a text field", "B" ],
        [ "What is the main purpose for JavaScript?", "Style", "Information", "Interactability", "Networking", "C" ]
    ];

    function_(x) {
        return document.getElementById(x);
    }
    function loadQuestion(){ 
        area = getId("area");
        if(pos >= questions.length){
            area.innerHTML = "<h2>" + "You got "+correct+" of "+questions.length+" questions 
            correct </h2>";
            getId("progress").innerHTML = "You've completed the test!";
            pos = 0; 
            correct = 0; 
            return false; 
        }
        getId("progress").innerHTML = "Question "+(pos+1)+" of "+questions.length; //Shows you what question you are on
        question = questions[pos][0]; 
        chA = questions[pos][1];
        chB = questions[pos][2];
        chC = questions[pos][3];
        chD = questions[pos][4];
        area.innerHTML = "<h3>"+question+"</h3>"; 
        area.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
        area.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
        area.innerHTML += "<input type='radio' name='choices' value='C'> "+chC +"<br>";
        area.innerHTML += "<input type='radio' name='choices' value='D'> "+chD+"<br>";
        area.innerHTML += "<button onclick='checkAnswer()'> Submit Yo 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][5]){
            correct++;
        }
        pos++; 
        loadQuestion();
    }
    window.addEventListener("load", loadQuestion, false);

Answer 1

Change this: 更改此：

<script type="text/javascript" src="/_assets/_js/quiz2.js"></script>

To this: 对此：

<script type="text/javascript" src="_assets/_js/quiz2.js"></script>

When you add a / at the beginning it will use an absolute path instead of relative. 当您在开头添加/时，它将使用绝对路径而不是相对路径。 Given that your CSS is working and you're using a relative path for that file, you should probably use a relative path for your JS too. 鉴于您的CSS可以正常工作并且您正在使用该文件的相对路径，您可能也应该为JS使用相对路径。

Answer 2

For this answer I am assuming that you _assets folder is within you HTML file directory. 对于此答案，我假设_assets文件夹位于HTML文件目录中。

Update source of your script tag. 更新脚本标记的源。 Add a dot(.) before start of the source or remove forward slash(/) from your source. 在源代码开始之前添加点（。）或从源代码中删除正斜杠（/）。 Following are two possibilities for your problem solution. 以下是您解决问题的两种可能性。

src="_assets/_js/quiz2.js" src =“ _ assets / _js / quiz2.js”

src="./_assets/_js/quiz2.js" src =“ ./_ assets / _js / quiz2.js”

Answer 3

You're having a typo in your JavaScript right there: 您的JavaScript中有错字：

function_(x) {
    return document.getElementById(x);
}

Delete the underscore after the function keyword. 在function关键字之后删除下划线。 Also the function needs a name. 函数也需要一个名称。 I guess it was supposed to be the "getId" function. 我猜应该是“ getId”函数。

There are numerous other errors, such no elements with a "progress" or "area" id. 还有许多其他错误，例如没有带“ progress”或“ area” ID的元素。 Check the browser console, it usually tells you when your code has issues like that. 检查浏览器控制台，它通常会告诉您代码何时出现此类问题。

I fixed your errors for you: 我为您修复了错误：

1 Add these to your HTML 1将它们添加到您的HTML

<div id="progress"></div>
<div id="area"></div>

2 Replace your broken function with this: 2用以下方法替换损坏的功能：

function getId (x) {
    return document.getElementById(x);
}

3 Remove the illegal new line in your loadQuesion function. 3删除loadQuesion函数中的非法新行。 So change this 所以改变这个

area.innerHTML = "<h2>" + "You got "+correct+" of "+questions.length+" questions 
        correct </h2>";

to this: 对此：

area.innerHTML = "<h2>" + "You got "+correct+" of "+questions.length+" questions correct </h2>";

Javascript未正确链接到我的HTML

问题描述

3 个解决方案

解决方案1
0 2015-10-22 05:58:29

解决方案2
0 2015-10-22 06:59:53

解决方案3
0 已采纳 2015-10-22 07:05:28

Javascript未正确链接到我的HTML

问题描述

3 个解决方案

解决方案1 0 2015-10-22 05:58:29

解决方案2 0 2015-10-22 06:59:53

解决方案3 0 已采纳 2015-10-22 07:05:28

解决方案1
0 2015-10-22 05:58:29

解决方案2
0 2015-10-22 06:59:53

解决方案3
0 已采纳 2015-10-22 07:05:28