Javascript verlinken funtioniert nicht?

Hallo,

Ich habe das seltsame Problem, dass ich eine Javascript Datei nicht verlinken kann. Bzw. dass der Inhalt auf der Javascript Datei nicht ausgeführt wird.

So habe ich die Datei im <head> Tag verlinkt:

Der Inhalt auf der Javascript Datei ist folgender:

"use strict"

$("#akzeptieren").click(function() {

$(".cookie").hide();

})

Wenn ich den Javascript Code allerdings in der selben HTML Datei ausführe mit

$("#akzeptieren").click(function() {

$(".cookie").hide();

})

</script>

funktioniert er.

Woran kann das liegen? Ich habe schließlich weitere Javascript Dateien verlinkt die alle funktionieren. Auch habe ich die JQuery Datei im <head> Tag verlinkt. Ich benutze den aktuellen Chrome Browser. Mit Firefox habe ich es auch schon probiert. Dort geht es auch nicht.

Als Editior verwende ich Visual-Studio-Code.

Ich bin gerade ziemlich verwirrt. Habe ich irgendwo einen Fehler gemacht?

3 Antworten

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, JavaScript

28.08.2021, 09:38

Deine Seite liegt sicherlich in einem anderen Verzeichnis als DocRoot und deshalb wird der Pfad der Javascript-Datei nicht gefunden. Schau in der Browser-Console nach, dort kommt sicherlich ein Fehler, dass die Datei nicht gefunden wurde.

Dein Pfad sollte vermutlich eher so sein:

/assets/js/cookie.js

Dann bezieht sich /assets immer auf den DocRoot, ohne führenden Slash dagegen immer relativ zum aktuellen Pfad. Bei dieser URL:

/mein/tolles/document.html

… wäre das dann:

/mein/tolles/assets/js/cookie.js

… und das willst du ja nicht.

PS: Bitte formatieren hier Code immer als Quelltext, da er sonst nicht leserlich ist.

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Splatoon278

Beitragsersteller

28.08.2021, 09:59

Zur Console. Es kommt diese Fehlermeldung. Was kann ich da jetzt machen?

Failed to load resource: net::ERR_FILE_NOT_FOUND

Babelfish

28.08.2021, 11:55

@Splatoon278

Na ja, wie du siehst, wird das Script nicht gefunden. Liegt es denn überhaupt in /assets/js/ drin?

Wie ich schon sagte, musst du einen absoluten Pfad mit Slash / am Anfang angeben, aber natürlich muss auch der Rest von Pfad stimmen. Beides kannst nur du überprüfen.

Splatoon278

Beitragsersteller

28.08.2021, 09:56

Das ist ein Cookie-Banner, der mit Javascript verschwinden soll, wenn man auf akzeptieren klickt.

<div class="cookie">
            <h2 id="cookie-überschrift">Diese Website verwendet Cookies</h2>
            <p id="cookie-text">Diese Website verwendet Cookies und Google Analytics für die Analyse und Statistik. Cookies helfen uns, die Benutzerfreundlichkeit unserer Website zu verbessern. Wenn du auf "Akzeptieren" klickst, stimmst du den genannten Bedingungen zu. Weitere Inforamtionen findest du in unserer <a href="file:///C:/Users/Kai/Documents/Vorlage%20Website/Datenschutzerkl%C3%A4rung.html">Datenschutzerklärung</a>.</p>
            <input id="akzeptieren" type="submit" value="Akzeptieren"> 
            <input id="ablehnen" type="submit" value="Weitere Einstellungen">
        </div>

Splatoon278

Beitragsersteller

28.08.2021, 09:54

Macht sinn. Allerdings funktioniert es dann immer noch nicht. Die anderen Dateien sind ja auch ohne / am Anfang verlinkt und funktionieren.

Vielleicht habe ich ja auch ein Fehler beim Objekt selbst gemacht. Ich schicke dir mal die wichtigsten Sachen.

<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Website</title>
<meta name="description" content="Thoughts, reviews and ideas since 1999."/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="shortcut icon" href="#">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/cookie.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/screen.css"/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,700,700italic|Playfair+Display:400,700,400italic,700italic"/>
</head>

Eutervogel

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

28.08.2021, 09:37

Ok, steht ein Fehler in der Konsole (F12 Reiter Console)?

Ist dein Code in einer document ready fiunction?

Splatoon278

Beitragsersteller

28.08.2021, 09:48

Vielen Dank für deine Antwort.

In meiner Konsole wird kein Fehler angezeigt. Zudem befindet sich mein Code auch in keiner document ready function.

Eutervogel

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

28.08.2021, 09:30

Bindest du jQuery über oder unter <script type="text/javascript" src="assets/js/cookie.js"></script> ein?

Splatoon278

Beitragsersteller

28.08.2021, 09:32

Ich verlinke jQuery genau über der verlinkten Javascript Datei:

Ähnliche Beiträge

JavaScript/jQuery! Wie einen Loop einbinden?

Auch hier bin ich absoluter Newby!

Ich habe eine nette kleine Funktion:

--------------------------------------------------------------------------------------------------------------

$({ countNum: $('.code2').html() }).animate({ countNum: 5360 }, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code2').html(Math.floor(this.countNum));

complete: function () {

$('.code2').html(this.countNum + "+");

//alert('finished');

}

});

--------------------------------------------------------------------------------------------------------------

Das funktioniert - alles supi - nun möchte ich, dass die Animation nach einem kleinen Zeitintervall erneut startet. Habe dazu über Google 'setInterval' gefunden und einen Code. Leider fehlt mir noch das Verständnis was ich wo einfügen muss.

Hier der Code von Google:

Edit: Ist der Code vielleicht falsch, javascript vs jquery???

function meineFunktion() { 
    // ... 
} 

setInterval(function() { 
    // alle 3 Sekunden ausführen 
    meineFunktion(); 
}, 3000);

Habe das so in meine Scriptdatei eingebunden:

--------------------------------------------------------------------------------------------------------------

$({ countNum: $('.code').html() }).animate({ countNum: 1295365}, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code').html(Math.floor(this.countNum));

setInterval(function() {

// alle 3 Sekunden ausführen

meineFunktion();

}, 3000);

complete: function () {

$('.code').html(this.countNum + "+");

//alert('finished');

}

--------------------------------------------------------------------------------------------------------------

Ich nehme an mindestestens "meineFunktion()" ist nur ein Platzhalter, aber ich bin nicht sicher, was da vom Code rein soll.

Stört das complete eigentlich die Wiederholung oder zeigt das nur an, was passiert, wenn es fertig hochgezählt hat?

Freue mich wie immer über Antworten! :)

Aber auch über Links z.B. mit einer leicht verständlichen Übersicht der Anatomie eines Jquery Codes, damit ich zukünftig besser allgemeine Beispiele an meine anpassen kann.

Bonusfrage:

Ich würde ganz gerne zu der Zahl noch eine einfache sich drehende Grafik (Kreis, Pfeil oä) hinzufügen. Hat da jemand zufällig nen leicht verständlichen Link oä dazu?

...zum Beitrag

Javascript Ajax Php kein Wert?

Console:

HTML javascript Code ajax:

function send(text){
   console.log("Text kurz vor versenden:\n" +text);
//hier hat er noch einen wert
   $.ajax({
     method: "POST",
     url: "DataSender.php",
     data: { text: text}
   }).done(function( response ) {
       console.log(response);
     console.log("weiterleitung

Php Code Ajax Übertragung wo es nicht geht:

      $text = $_POST['text'];
      $sql = "INSERT INTO `Xss-Data` (`ID`,`DATA`, `created_at`) VALUES (null, '{$text}' , CURRENT_TIMESTAMP)";

      if (empty($text)) {
              //das ist empty!
              echo("Error:\nEs ist leer\nText wäre\n$text");
          } else

Sind die wichtigen Code snippets

Der String hat keinen Wert. Warum? Wie löst man das?

...zum Beitrag

Dumme Javascript Frage?

Keine Ahnung warum ich nicht selbst drauf komme aber warum kann ich hier nicht den value in die variable lesen?
<select id="selection" onchange="showBoxes()"></select>

showBoxes() ist auch die function in der der code steht

Danke im voraus LG

...zum Beitrag

JavaScript Tic Tac Toe AI Programmierung?

Guten Abend Community,

ich möchte gerne ein Tic-Tac-Toe Game mit einem AI (BOT) programmieren. Der bisher programmierte Code funktioniert nur für Player vs Player. Habe schon ein bisschen rumgespielt, aber noch keine wirkliche richtige Lösung für den AI gefunden.

In dem folgenden Link, könnt Ihr mein JavaScript Code finden. (Ich weiß, kein guter Programmierstil, jedoch geht es mir momentan in erster Linie um die Funktionalität.

Könnt mir aber gegebenfalls Verbesserungsvorschläge schreiben! :)

https://pastebin.com/e3LbFp1k

Den folgenden Code habe ich einfach mal ausprobiert, jedoch funktioniert er nicht, da ich eine Endlosfunktion geschrieben habe.

function button(btn) {
    click_count++;         
    setX(btn);
    bot();
    checkForWin();
}

function setX(btn){
    button.value = "X";
    symbol = "O";
}

function bot() {
    var random_pick = [btn0, btn1, btn2, btn3, btn4, btn5, btn6, btn7, btn8]
    bot = random_pick[Math.floor(Math.random()*random_pick.length)]
    if (bot.value != "X" || "O") {
        bot.value = "O";
        click_count++;
        symbol = "X";
        button();
    }else{
        bot();
    }
}

Vielleicht kann mir ja jemand weiterhelfen, wie ich weitermachen soll... Sitze zur Zeit etwas fest.

...zum Beitrag

Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


@app.route('/')
def index():
    return render_template('output.html')

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

... // FLASK
        var socket = io();

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.color;
        });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

...zum Beitrag

Variable in Javascript in ein text dokument schreiben?

Hi Leute wie ihr in der Überschrift bereits seht wollte ich wissen wie man den Inhalt einer Variable in Javascript in ein Text Dokument schreiben kann welches sich in dem Ordner der HTML und Javascript datei befindet.

...zum Beitrag

Javascript (JQuery) in PHP einbinden?

Schönen guten Abend liebe Community,

also ich kann mich seit Ostern dieses Jahres als glücklicher Programmieranfänger bezeichnen. So habe ich mit HTML und CSS begonnen und mich dann über Javascript(JQuery) und Python auch mal an PHP getraut, da ich meine Web-Developement 'Skills' auch mal im Back-End erweitern wollte. Jetzt stoße ich aber ziemlich früh an ein Problem, bei dem ich einfach nicht dahinter Blicke. Meine Intention ist es dabei Javascript (vorallen Dingen JQuery) in PHP mit einzubeziehen. Dafür habe ich mithilfe von XAMPP einen lokalen Server gehostet, auf dem auch alles wunderbar funktioniert. Selbst CSS habe ich nach etwas 'Mehrrerei' zum Laufen gebracht. Jetzt scheitert es aber leider an JQuery. Ich habe das bislang wie im Bild erkenntlich so versucht, meine JQuery Datei mit in den Ordner zu ziehen. Diese dann im Head Bereich zu verlinken und ein Javascript-Script zu erstellen. Wenn ich dort nun jedoch JQuery Code hineinschreibe, wird dieser im Browser nicht ausgeführt.

Nun meine Frage....warum funktioniert das Ganze nicht, bzw. was habe ich falsch gemacht?

Danke schon einmal für alle Antworten!

...zum Beitrag

JQuery in JavaScript Converter?

Hey Leute,

ich möchte gerne meinen jQuery-Code in JavaScript umwandeln. Mir ist klar, dass jQuery auch JavaScript ist, das halt nur eine Library benötigt. Gibt es so etwas wie einen jQuery-to-JavaScript-Converter?

Ich möchte halt diesen Code umwandeln:

<script>
  $(document).ready(function () {
    $('#call').on("input", function () {
      tmpval = $(this).val();

      if (tmpval == '') {
        $('#key').removeClass('lglan');
      }
      else {
        $('#key').addClass('lglan');
      }
    });
  });
</script>
<script>
  $(document).ready(function () {
    $('#receive').on("input", function () {
      tmpval = $(this).val();

      if (tmpval == '') {
        $('#key2').removeClass('lglan');
      }
      else {
        $('#key2').addClass('lglan');
      }
    });
  });
</script>
<script>
  $(document).ready(function () {
    $('#call').on("input", function () {
      tmpval = $(this).val();

      if (tmpval == '') {
        $('#vm').removeClass(' esy ');
        $('#vm').addClass(' odn ');
      }
      else {
        $('#vm').addClass(' esy ');
        $('#vm').removeClass(' odn ');
      }
    });
  });
</script>
<script>
  $(document).ready(function () {
    $("#change").focusin(function () {
      $("#change").addClass("dri2");
    })
    $("#change").focusout(function () {
      $("#change").removeClass("dri2");
      $("#change2").focusin(function () {
        $("#change2").addClass("dri2");
      })
      $("#change2").focusout(function () {
        $("#change2").removeClass("dri2");
      })
    })
  });
</script>
<script>
  $(document).ready(function () {
    $('#call').on("input", function () {
      tmpval = $(this).val();

      if (tmpval == '') {
        $("#vm").attr("disabled", "disabled");
        $("#vm").removeAttr("enabled", "enabled");
      }
      else {
        $('#vm').attr("enabled", "enabled");
        $("#vm").removeAttr("disabled", "disabled");
      }
    });
  });
</script>
<script>
  $(document).ready(function() {
    $('#receive').on("input", function() {
      let currentValue = $(this).val();

      if (!currentValue.length) {
        $('#toggle').html('');
      }
      else {
        $('#toggle').html('<a id="click" class="lock" href="javascript:;"><?php echo $show ?></a>');
      }
    });
    $(document).on("click", "#click", function() {
      let text = $(this).text();

      if (text === "<?php echo $show ?>") {
        $(this).text("<?php echo $hide ?>");
        $("#receive").attr("type", "text");
      }
      else {
        $(this).text("<?php echo $show ?>");
        $("#receive").attr("type", "password");
      }
    });
  });
</script>

Wenn jemand etwas weiß, wäre es cool, mich zu unterstützen. 😉

...zum Beitrag

JavaScript Canvas Bilder werden Komisch angezeigt, Lösung?

Hallo,

ich bastele gerade mit dem HTML5 Canvas herum und möchte dort mit JavaScript ein Bild anzeigen, dies Funktioniert auch allerdings werden sie sehr komisch angezeigt, meist zu groß oder verschwommen hier der JavaScript code:

"function drawImage(url) {

var img = new Image();

img.onload = function () {

ctx.drawImage(img,10, 10, 35, 35);

}

img.src = url

hier habe ich schon mit den drawImage Parametern rumgespielt um es anzupassen allerdings kam kein gutes Ergebnis heraus...

Hier noch die canvas daten: width: 900px; height: 700px;

diese habe ich mit CSS angegeben.

Schonmal vielendank für eure Hilfe!

...zum Beitrag

Wordpress Seite als eine HTML, CSS und JS Datei exportieren?

Hallo,

ich möchte eine Wordpress-Website statisch wie sie zu sehen ist als HTML, CSS und JavaScript Dateien exportieren. Leider funktioniert dies nicht wie ich es möchte, da alle JavaScript Funktionen für z.B. ausklappbare Menüs in einzelnen JS Dateien liegen. Auch das CSS ist teilweise in der entsprechenden Datei, teilweise aber auch im HTML Code, das ist aber nebensächlich.

Gibt es irgendein Tool - egal ob Online mit GUI oder als Shell Anwendung, dass es mir ermöglicht, die Seite wie von mir beschrieben als Einzeldateien herunterzuladen?
Die Seite läuft nicht über meinen eigenen WP Account, ich kann also keine WP Plugins installieren...

LG und vielen Dank

Andy

...zum Beitrag

Source Code von Website auslesen mit JavaScript?

Hallo,

ich bin gerade am verzweifeln. Ich wollte eigentlich nur noch kurz eine kleine Sache an meiner Website programmieren, aber jetzt hänge ich schon seit einer Stunde an einem Problem. Ich will einfach nur den Source Code von einer Website auslesen, also den in JavaScript dann als Variable haben, aber der Code funktioniert einfach nicht. Keine Ahnung warum. Habt ihr vielleicht Ideen?

Hinweis: Wenn ich ein alert in die onreadystatechange function mache wird dieses angezeit, doch wenn ich es in den if-Block darin einschließe nicht mehr.

...zum Beitrag

Wie sende ich Variablen von JavaScript nach Flask via jQuery?

Hallo,

ich bin in JavaScript/jQuery und auch Python/Flask noch ein ziemlicher Anfänger. Ich versuche gerade, einfach nur ein JSON-Objekt aus JavaScript in einem HTML-Template mit Flask anzuzeigen.

Hier mein Code:

Flask:

from flask import Flask,request, render_template

app = Flask(__name__)

@app.route("/")
def rofl():
  return render_template("test.html")

@app.route("/test", methods=['POST'])
def test():
  Namensliste = request.get_json(True)
  print(Namensliste)
  return render_template("rofl.html", Namensliste=Namensliste)

if __name__ == '__main__':
  app.run(port=5200)

test.html:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form action="#" method="post">
    <button type="button" onclick="JSONTest()"> Send UserInfo</button>
  </form>
</body>

rofl.html:

<head>
  <meta charset="UTF-8">
  <title>Titel</title>
</head>
<body>
  NamensListe: {{Namensliste}}
</body>

JavaScript-Datei:

var myJason = {
  "name1" : "Jens",
  "name2" : "Josef",
  "name3" : "Johannes"
}

function JSONTest() {
  var MyJason= JSON.stringify(myJason);
  console.log(MyJason)
  $.ajax({
    type: 'POST',
    url: '/test',
    data: MyJason,
    success: function(data) {
      console.log(data, "Rückmeldung1");
  }});
}

Wie mein Code eigentlich funktionieren soll ist: Ich rufe die Route "/" auf, drücke auf den Button: "JSONTest()" und meine Funktion sendet via jQuery mein JSON-Objekt an "/test". Dort wird das Objekt in Namensliste gespeichert und rofl.html mit der Namensliste darin aufgerufen.

Ich weiß, dass hier wahrscheinlich viele Grundlagenfehler drin sind, aber ich habe wirklich ewig lang gegooglet und finde einfach nicht, wie man es richtig macht.

Danke schon einmal für jede Idee.

...zum Beitrag

HTML, CSS, JavaScript Animation einfügen?

Ich habe folgenden Code, der bei Klick auf ein Menüpunkt einen bestimmten Code anzeigt.

Wie implementiere ich eine Fade-In und Fade-Out Animation.

Wenn z.B. gerade Content 1 angezeigt wird und man auf den Menüpunkt 2 klickt Content 2 angezeigt wird:

...dass Content 1 von Opacity 100 auf 0 geht
...dass Content 1 in Minus Y-Richtung 20px bewegt wird
...dass Content 2 von Opacity 0 auf 100 geht
...dass Content 2 von -20px in Plus Y-Richtung 20px bewegt wird

Alles in einer Zeit von 0,3 Sekunden.

Wie mache ich das am Besten?

Danke.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
  #wrapper_main {
    display: flex;
    width: 100%;
  }
  #wrapper_menue {
    width: 20%;
    margin-right: 10%;
  }
  #wrapper_content {
    width: 70%;
  }
  .menu-item, .submenu-item {
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    background-color: #f0f0f0;
  }
  .menu-item:hover, .submenu-item:hover {
    background-color: #dddddd;
  }
  .content {
    display: none;
  }
  #submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
  }
  #wrapper_menue:hover #submenu {
    max-height: 200px;
  }
</style>
</head>
<body>
<div id="wrapper_main">
  <div id="wrapper_menue">
    <div class="menu-item" onclick="showContent('content_1')">Menüpunkt 1</div>
    <div class="menu-item" id="menu-item-2" onclick="showContent('content_2')">
      Menüpunkt 2
      <div id="submenu">
        <div class="submenu-item" onclick="showContent('content_2_1', event)">Submenüpunkt 1</div>
        <div class="submenu-item" onclick="showContent('content_2_2', event)">Submenüpunkt 2</div>
        <div class="submenu-item" onclick="showContent('content_2_3', event)">Submenüpunkt 3</div>
        <div class="submenu-item" onclick="showContent('content_2_4', event)">Submenüpunkt 4</div>
      </div>
    </div>
    <div class="menu-item" onclick="showContent('content_3')">Menüpunkt 3</div>
  </div>
  <div id="wrapper_content">
    <div id="content_1" class="content">
      <h2>Inhalt 1</h2>
    </div>
    <div id="content_2" class="content">
      <h2>Inhalt 2</h2>
    </div>
    <div id="content_2_1" class="content">
      <h2>Inhalt 2.1</h2>
    </div>
    <div id="content_2_2" class="content">
      <h2>Inhalt 2.2</h2>
    </div>
    <div id="content_2_3" class="content">
      <h2>Inhalt 2.3</h2>
    </div>
    <div id="content_2_4" class="content">
      <h2>Inhalt 2.4</h2>
    </div>
    <div id="content_3" class="content">
      <h2>Inhalt 3</h2>
    </div>
  </div>
</div>

<script>
function showContent(id, event) {
  if (event) {
    event.stopPropagation();
  }
  var contents = document.querySelectorAll('.content');
  contents.forEach(content => {
    content.style.display = 'none';
  });
  document.getElementById(id).style.display = 'block';
}
window.onload = function() {
  showContent('content_1');
};
</script>
</body>
</html>

...zum Beitrag

Wenn man auf einer Website einen Button integrieren möchte, der die Farbe ändert wenn man mit dem Mauszeiger drüber geht, nutzt man da eher Javascript oder?

jQuery Code dafür? Und der Button soll natürlich wenn man mit der Maus wieder vom Button runtergeht die Ursprungsfarbe annehmen?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen