Search code examples
javascriptjquerypythonfileconflict

JavaScript-file stopped working when including another file

I have a own made captcha-function that uses Js and Python. It is a riddle the user has to answer. This worked super, but then I wanted to add a clue, if the user can not answer my question. So I added another file, that also works fine. But then my javascript handeling the communication with the python-server totally stopped working. The window.onload wont even run. But the file is correct included, because if I put a console.log("whatever"); outside the window.onload, it prints out.

HEADER HTML (the two last includes is failing)

<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);
}

As for now the python-communication javascript do not work. If i change the way the files are included in the header, the file work, but the clue-file do not.

Solution

  • I solved this by adding a new file with a window.onload in and removed it from the others, And then I call al the functions form that, main javascrpt