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

Fragesteller

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>

Splatoon278

Fragesteller

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

Fragesteller

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.

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

Fragesteller

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

Fragesteller

28.08.2021, 09:32

Ich verlinke jQuery genau über der verlinkten Javascript Datei:

Ähnliche Fragen

Javascript auslagern (HTML)?

Hallo,

wenn ich mit <script> einen Javascriptcode in HTML schreibe, geht alles, wenn ich das Script auslagere also in eine .js Datei schreibe und genau den gleichen Text wie im HTML Code dort einfüge, ohne das <script> </script>, dann geht es irgendwie nicht. Ich habe die Datei im Head so verlinkt <script src="js/button.js"></script>

Wieso geht es dann nicht mehr?

...zur Frage

Javascript Cookie beim neu laden verhindern?

Hallo,

Wie kann ich verhindern, dass der Cookie beim neu Laden der Seite verhindert wird? Denn immer, wenn ich am Anfang den Namen des Besuchers abfrage, wird dieser nicht nur immer beim neuen betreten der Website gezeigt, sondern auch, wenn man die Seite neu lädt. Wie kann ich das verhindern?

Vielen Dank!

Hier mein Code:

<!DOCTYPE html>


<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body onload="checkCookie()">
        <input type = "button" onclick = "setCookie('anwender','',-1)" value = "Cookie
        l&ouml;schen">
        <h1>Website Test-Cookie</h1>
        <script>
        function setCookie(cookieName,inhalt,dauer) {
            let datum = new Date();
            datum.setTime(datum.getTime() + (dauer*24*60*60*1000));
            let ablaufdatum = "expires=" + datum.toGMTString();
            document.cookie = cookieName + "=" + inhalt + ";" + ablaufdatum;
        }


        function getCookie(cookieName) {
            cookieName += "=";   
            let decCookie = decodeURIComponent(document.cookie);          
            let arr = decCookie.split(';');
            for(let i = 0; i < arr.length; i++) {
                let inhalt = arr[i];
                while (inhalt.charAt(0) == ' ') {
                    inhalt = inhalt.substring(1);
                }
                if (inhalt.indexOf(cookieName) == 0) {
                    return inhalt.substring(cookieName.length);
                }
            }
            return "";
        }


        function checkCookie() {
            let anwender = getCookie("anwender");
            if (anwender != "") {
                alert("Hallo " + anwender + "!");
                $("h1").hide();
            }
            else {
                anwender = prompt("Geben Sie bitte Ihren Namen ein:");
                $("h1").show();
                if (anwender != "" && anwender != null) {
                    setCookie("anwender", anwender, 180);
                }
            }
        }
        </script>
    </body>
</html>

...zur Frage

Weiterleitung auf andere datei durch button click?

Weiß jemand ob es möglich ist mit dem tag eine weiterleitung auf eine andere datei zu machen? möglichst ohne javascript usw. ich möchte auf eine datei verlinken, auf keine webseite

...zur Frage

Wo soll ich meine elemente in dem Javascript einfügen?

<script>
      document.addEventListener('DOMContentLoaded', function() {
          const scrollButtons = document.querySelectorAll('.button1');

          scrollButtons.forEach(button => {
              button.addEventListener('click', function() {
                  const target = button.getAttribute('data-target');
                  const targetElement = document.getElementById(target);

                  if (targetElement) {
                      window.scrollTo({
                          top: targetElement.offsetTop,
                          behavior: 'smooth'
                      });
                  }
              });
          });
      });
  </script>

Hi,

AI hat mir den code gegeben um meine buttons nützlich zu machen. Weil ich kein Javascript kann weiß ich nicht wo ich meine class namen einfügen soll.

Bitte helft mir

LG Lisa

...zur Frage

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. 😉

...zur Frage

Website dauerhaft mit Javascript bearbeiten?

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      <input placeholder="Irgendwas eingeben" id="password">
    </div>
    <button onclick="password()"> Press Me</button>
    <script>
      
      function password() {
        let password = document.getElementById('password').value;
        let element = document.createElement('div');
        element.innerText = password;
        document.body.appendChild(element);
      }
    </script>
  </body>
</html>

Hi wenn ich nun die Website neu Lade dann bleiben die Divs nicht bestehen,

kann mir jemand sagen wie ich die Divs dauerhaft auch für andere clients sichtbar

behalten kann.?

...zur Frage

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.

...zur Frage

Wie bekomme ich es hin, dass der alert bei javascript auf der Website angezeigt wird und nicht in einem extra Fenster?

Ich habe es schon mit document.write und document.get versucht. Die Aufgabenstellung lautet wie folgt:

"Erstellen Sie eine html Seite, die einen Button enthält. Klickt man auf den Button, wird eine Java Script Funktion aufgerufen, die einen beliebigen Text als alert auf der Seite ausgibt. "

Ich habe bisher folgendes:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Test</title>
   </head>
   <body>
      <form name="button">
      <input type=button value="Alert" onclick="Box()">
      </form>
      <script language="JavaScript">
         function Box() {alert("Alarm!!")};
      </script>
   </body>
</html>

...zur Frage

JavaScript: Wie kann ich den Browser nach zwei Sekunden automatisch in den Vollbildschirmmodus wechseln lassen?

Hallo,

ich habe eine .html-Datei und möchte, dass, wenn diese Datei ausgeführt wird, dass dann im Browser nach zwei Sekunden der Vollbildmodus aktiviert wird.

Also, dass das Gleiche passiert, wie wenn man die Taste F11 drückt, nur mit dem Unterschied, dass das automatisch nach zwei Sekunden passiert.

Folgenden Code habe ich probiert:

<script>
  setTimeout(function() {
    enterFullscreen(document.documentElement);
  }, 2000);
</script>

Jedoch funktioniert dieser nicht.

Welchen Code muss ich dafür verwenden?

...zur Frage

Undisabled eines Buttons durch JavaScript?

Hallo,

ich möchte mit Hilfe von JavaScript einen Button, der vorher disabled war, wieder aktiviert, sodass er undisabled ist. Die funktioniert leider nicht und ich habe kein Ahnung an was es liegen könnte.

Mein HTML Code:

<body>

</body>

}

Mein Javascript Code:

let button = document.getElementbyid('button' );

function Test() {

button.disabled = false;

}

Weiß jemand an was es liegen könnte?

...zur Frage

HTML / JavaScript: Wie kann ich nur eine Checkbox gleichzeitig auswählen lassen?

Ich würde es gern irgendwie so machen, dass man bei einer Checkbox nur eine gleichzeitig auswählen kann. Ich habe das bereits mit:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('.containerb').click(function() {
      $('.containerb').not(this).prop('checked', false);
    });
  });
</script>

probiert, aber das klappt nicht.

Hat jemand noch eine andere Idee?

...zur Frage

JavaScript Datei auslesen was mache ich falsch?

Ich weiß das es so nicht funktionieren kann aber wie geht es denn richtig???

Was mache ich falsch? Der Error ist :

Uncaught ReferenceError: require is not defined at Test.html:12:28

Mein Code

<!DOCTYPE html>
    <html >
        <head>
        <title>Test</title>
        </head>
            <body>


            </body>

            <script>
                const fs = require("fs");
                fs.readFile("test.txt", (err, data) => {
                if (err) throw err;

                console.log(data.toString());
                });
            </script>
    </html>

...zur Frage

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

...zur Frage

Visibility-Funktion geht nicht. Was ist falsch?

Auf meiner Website programmiere ich ein Loginsystem, bei dem ich eine "Visibility-Funktion" (show/hide password) implementiert habe.

Immer wenn ich auf das Icon klicke, soll es die Eigenschaft: "display: none" annehmen, das andere Icon einblenden und den input-Tag auf: type="password" setzen, damit man das Eingegebene sieht.

Der Wechsel zwischen den zwei Icons funktioniert prima. Leider ändert sich der Input type nicht. Ich habe irgendeinen Fehler im Sourcecode, nur finde ich diesen nicht.

HTML:

<div class="login_element password">
  <i class="fa fa-lock password_lock" aria-hidden="true"></i>
  <input type="password" placeholder="password*" class="inputpassword" />
  <i class="fa fa-eye" id="show" aria-hidden="true" onclick="pwdvison()"></i>
  <i class="fa fa-eye-slash" id="hide" aria-hidden="true" onclick="pwdvison()"></i>
</div>

JS:

<script type="text/javascript">
  function pwdvison() {
    var x = document.getElementsByClassName("inputpassword");
    
    if (x.type === "password") {
      x.type = "text";
      document.getElementById('hide').style.display = "inline-block";
      document.getElementById('show').style.display = "none";
    }
    else {
      x.type = "password";
      document.getElementById('hide').style.display = "none";
      document.getElementById('show').style.display = "inline-block";
    }
  }
</script>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen