JavaScript-file 在包含另一个文件时停止工作

Question

我有一个自己制作的 captcha-function，它使用 Js 和 Python。这是用户必须回答的谜语。这非常有效，但如果用户无法回答我的问题，我想添加一条线索。所以我添加了另一个文件，它也可以正常工作。但是后来我的 javascript 处理与 python-server 的通信完全停止了。 window.onload 甚至不会运行。但是包含的文件是正确的，因为如果我放 console.log("whatever");在 window.onload 之外，它会打印出来。

HEADER HTML（最后两个包含失败）

<head>
<meta charset="UTF-8">
<title>Kristoffer Karlsson</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/myCSS/myStyle.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
      integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

<script src="js/myJs/smoothScroll.js"></script>
<script src="js/jquery.touchSwipe.js"></script>
<script src="js/myJs/swipe.js"></script>
<script src="js/myJs/showContacts.js"></script>
<script src="js/myJs/showClue.js"></script>

window.onload = function() {
    var form = document.getElementById("jokeForm");
    console.log("contacts");
    form.onsubmit = callServer;
};


function callServer() {
    var answer = document.getElementById("answerField").value;
    console.log(answer);
    $.ajax({
        type: "GET",
        url: "http://localhost:3000/checkAnswer/"+ answer,
        success: checkAnswer
    });
    return false;
}

function checkAnswer(respons) {
    console.log(respons)
    if(respons == "wrong"){
        return false;
    }else {
        addContacts(respons);
    }
}

function addContacts(response) {
    removeQuestion();
    var parent = document.getElementById("contactInfo");
    var email = document.createElement("H2");
    var phone = document.createElement("H3");
    email.textContent = response;
    phone.textContent = "070-287 12 36";
    parent.appendChild(email);
    parent.appendChild(phone);
}

function removeQuestion() {
    var questionDiv = document.getElementById("jokeDiv");
    questionDiv.remove();
}

window.onload = function() {
    var link = document.getElementById("giveClue");
    console.log("clue");
    link.onclick = showClue;
};

function showClue() {
    var link = document.getElementById("giveClue");
    link.style.display = "none";
    var parent = document.getElementById("jokeDiv");
    var paragraph = document.createElement("p");
    var clue = document.createTextNode("Nisse's father... who is Nisse?");
    paragraph.appendChild(clue);
    parent.appendChild(paragraph);
}

至于现在 python-communication javascript 不起作用。如果我更改文件包含在 header 中的方式，文件可以工作，但 clue-file 不会。

Answer 1

我通过添加一个带有 window.onload 的新文件并将其从其他文件中删除来解决这个问题，然后我调用所有函数形式，main javascrpt

JavaScript-file 在包含另一个文件时停止工作

JavaScript-file stopped working when including another file

javascript

jquery

python

file

conflict