jQuery lädt nicht?

Hallo,

ich brauche Hilfe bei diesem Code:

Index:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dokument</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(function () {
        $("#nav").load("nav.html");
      });
    </script>
    <link rel="stylesheet" href="style.css"><link>
  </head>
  <body>
    <div id="nav"></div>
  </body>
</html>

geladene Datei:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dokument</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(function () {
        $("#nav").load("nav.html");
      });
    </script>
    <link rel="stylesheet" href="style.css"><link>
  </head>
  <body>
    <div id="nav"></div>
  </body>
</html>

Das Problem ist, dass wenn ich die Index mit einem Live Server starte dann kann ich auch die geladene Navigation sehen, aber wenn ich sie normal öffne (Doppelklick auf die Datei (Chrome)) dann geht es nicht.

Danke im voraus

2 Antworten

TechPech1984

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Computer

23.12.2021, 17:26

du musst über ein server gehen , das problem wird sonst das protokoll problem werden . die origin wird das so nicht will , wenn du genau guckst wird das einen fehler werfen, .

hier ist ein unterschiedliches protokoll am greifen file:// vs http://

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf file:///C:/Users/Rakondark/Desktop/nav.html. (Grund: CORS-Anfrage war nicht http)

p.s. gewöhn dir an das debugging zu nutzen , dann siehst du auch die fehler die im browser gemacht wurden .

praktisch versuchst du mit einer http resource eine file resource zu öffnen , das ist aber nicht erlaubt , aus gutem grund , den sonst könnte ein externes script einfach auf deinen computer zugreifen .

soll es nur ein lokales ding sein , dann musst du das jquery script auch lokal bereit stellen.

p.s. sowieso nciht gut eine nav so nachzuladen . wenn kann man sie gleich reinpacken oder arbeitet gleich via server script . das was du machst ist halt ... letztes jahrtausend, gleich danach kommen frames . aber durchaus machbar wenn man wirklich nur lokale (offline) dinge machen will und davon ausgeht das es keine server scripte geben wird .

crRaphi

Fragesteller

23.12.2021, 18:08

Danke, ich will es irgenwann mal ins Internet stellen.

Also würde man es sehen wenn man es auf einen Server lädt, aber wenn man es lokal öffnet dann nicht?

Wie würdest du es machen? Ich kann aber nur html und css programmieren, bis jetzt.

Destranix

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, programmieren

23.12.2021, 17:24

Womöglich verbietet der Browser das Laden von Scripten aus fremden Quellen?

Schau mal in deine Browserkonsole, ich nehme an du musst ein paar Header passend setzen.

TechPech1984

23.12.2021, 17:44

sollte auch mit headern nicht machbar sein , abfrage von file wäre zugriff aufs system , ergo man kann viele cross origin ändern aber das wäre ein einfallstor für jeden der das client system hacken will . domains ok , protokolle , nicht ok .

Destranix

23.12.2021, 18:15

@TechPech1984

Naja, wenn man im localhost einen Server hostet, dann sollte soetwas gehen.

Hallo,

ich möchte hier Absatz 2-5 eine Klasse ('abschnitt') geben und deren Text ändern zu 'neuer jQuery Text'.

Wieso funktioniert das hier nicht?

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    'use strict';

    document.onload = function() {
      for (var i = 1; i < document.querySelectorAll('p').length; i++) {
        document.querySelectorAll('p')[i].classList.add('abschnitt');
        $('.abschnitt').text('neuer jQuerytext');
      }
    }
  </script>
  <script></script>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <br>
  <h1> Überschrift </h1>
  <h2 id="ü2"> Überschrift h2 </h2>
  <p id="p1"> Absatz 1 </p>
  <p id="p2"> Absatz 2</p>
  <p> Absatz 2</p>
  <p> Absatz 3</p>
  <p> Absatz 4</p>
  <p> Absatz 5</p>
</body>
</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

jQuery Eingabe unten einfügen?

Ich soll einen Code schreiben, der die Eingabe nach dem drücken des Buttons unten auflistet (wie im Bild gezeigt). Kann mir jemand sagen was ich falsch gemacht habe?

Hier mein Code:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Praktikum Webanwendungen 1</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <style>
        h1{
            font-size: 50px;
        }


        div{
            float: left;
            margin: 10px;
        }


        .aufgabe{
            font-weight: bold;
            font-size: larger;
        }
       
        .liste{
            border: solid black;
        }
    </style>
    <body>
        <h1>Todo Liste</h1>
        <div class="aufgabe">Aufgabe:</div>
        <div class="eingabe"> <input type="text"> </div>
        <div class="erstellen"> <input type="submit" value="Erstellen"> </div>
        <br><br>
        <p class="liste"></p>
    </body>
    <script>
        $(document).ready(function(){
            $(".erstellen").click(function(){
                $("input").appendTo(".liste");
            });
        });
    </script>
  </body>
</html>

...zur Frage

Bild aus einem Input mit Javascript anzeigen?

Ich würde gerne, dass man eine Datei hochlädt und mit einem Button dann auf der Seite anzeigen lassen kann. Ich habe schon etwas rum probiert und es kommt immer nur " [object HTMLImageElement] " raus.

Mein Code ist dieser:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        function anzeigen() {

            let bild = new Image();
            bild.src = document.getElementById("input");

            document.getElementById("bild").innerHTML = bild;

        }


    </script>
</head>
<body>
    <input type="file" accept="image/png, image/jpg" id="input">
    <input type="button" onclick="anzeigen();">
    <div id="bild">



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

Das hochladen von Dateien funktioniert perfekt. Nur wird das Bild nicht angezeigt.

(Bin Anfänger)

Danke für eure Hilfe^^

...zur Frage

Fehler bei der ausgabe HTML & JS?

Bei folgendem Code gibt es nicht den eingegebenen Text aus

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Einkaufsliste</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,700;1,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <style>
        body{
            background-color: rgb(0, 83, 238);
            font-family: 'Noto Serif', serif;
        }
        .content{
            background-color: white;
            width: 600px;
            margin-left: 660px;
            margin-right: 660px;
            margin-top: 20px;
        }
        .content h1{
            text-align: center;
            font-size: 60px;
        }
        .content form{
            padding-left: 125px;
            width: 200px;
        }


    </style>
</head>
<body>
    <div class="content">
        <h1>Einkaufsliste</h1>


        <!-- Simple Textfield -->
<form action="#">
    <div class="mdl-textfield mdl-js-textfield">
      <input class="mdl-textfield__input"  type="text" id="liste1">
      <label class="mdl-textfield__label"  for="liste1">Produkt</label>
    
    </div>
    <button onclick="subFunc()" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
        <i class="material-icons">add</i>
        <p><var liste></var></p>
      </button>
  </form>
  
  <script>
      function subFunc(){
      var liste = document.getElementById('liste1')
      document.write(liste)


    }
  </script>


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

...zur Frage

Abstand nach oben entfernen <CSS>?

Hallo,

ich möchte den Abstand oben entfernen. Es funktioniert einfach nicht, egal was ich mache.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
    <H1>Willkommen auf meiner Webseite</H1>
</div>
    <script>
        function myFunction() {
           var element = document.body;
           element.classList.toggle("dark-mode");
        }
        </script>
        <button onclick="myFunction()">Toggle dark mode</button>
</body>
</html>

CSS:

body {
  padding: 0%;
  margin: 0%;
  background-color: white;
  color: black;
  font-size: 25px;
  width: 100%;
  height: 100%;
  
}
.dark-mode {
  background-color: black;
  color: white;
}
.box{
  justify-content: center;
  padding: 0%;
  margin: 0%;
  padding-top: 0%;
  margin-top: 0%;
  background-repeat: no-repeat;
  width: 100%;
  height: 6cm;
  background-image: url(img/web-1012467_1920\ \(1\).jpg);
}

Das wäre der Code, ich hoffe irgendwer kann mir helfen.

So sieht es aus:

Danke im voraus.

...zur Frage

Rechnung mit Javascript?

Vorweg: Ich bin noch ziemlich unerfahren, was JS betrifft

Ich habe einen Button auf einer HTML Seite. Ich würde es gerne so machen, dass, wenn man auf den Button drückt, einer Variable immer um eins steigt (Halt, dass der Variable 1 dazu gerechnet wird)

Beispiel: Button einmal gedrückt, Variable = 000.001

Button nochmal gedrückt, Variable = 000.002

Button 23 mal gedrückt, Variable = 000.023 usw..

Diese Variable soll dann auch auf dem Bildschirm angezeigt werden. Kann mir wer helfen?

Das ist momentan mein Code:

Danke im Voraus

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Rechnung</title>
    </head>
    <body>
        <button onclick="addition()">Drücke hier</button>
        <div id="Ergebnis">000.000</div>
    </body>
    <script>
        let Ergebnis

        function addition (){
            Ergebnis += 1;
        }
    </script>
</html>

...zur Frage

Musik lauter machen in JS?

Hi Liebe Community,

Ich habe folgendes Problem:

Ich habe mit JavaScript und HTML einen Button gemacht, der Musik spielt. Jetzt würde ich es gerne so machen, das, wenn man auf zwei andere Button drückt, einer plus und minus, die Musik immer ein bisschen lauter und/oder ein bisschen leiser wird (halt so, das man mehrmals auf den Button drückt, damit es pro Click ein bisschen lauter/leiser wird , aber ich komme nicht weiter, könnt ihr mir helfen?

Danke im voraus, für die Hilfe

Quellcode:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="playMusic()">starte Musik</button>
    <button onclick="volumeeUp()">+</button>
    <button onclick="volumeDown()">-</button>
</body>
<script>
    const audio = new Audio();
    audio.src = "musik.mp3"
    audio.loop = true;

    function playMusic() {
        audio.play();
    }

    function volumeUp(){
        audio.volume = +1;
    }

    function volumeDown(){
        audio.volume = -1
    }
</script>
</html>

...zur Frage

Einkaufsliste JavaScript mehrere Einträge?

Hallo, ich bin noch Anfänger im Programmieren und hätte eine Frage: wie kann ich mehrere Einträge in die UL packen? Bis jetzt geht nur ein Eintrag. Und wenn ich einen neuen hinzufügen will dann wird der alte gelöscht.

Tut mir leid für die dummen variablen Namen xD

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <input type="text" name="kaufen" id="test">
    <button id="btn">Hinzufügen</button>
    <ul id="list"></ul>
<script>
const hinzufügenbtn = document.getElementById("btn");
 hinzufügenbtn.addEventListener("click", function(){
   const add =  document.getElementsByName("kaufen")[0].value;
    const  tt = document.getElementById("list").innerHTML = add;
 })
</script>
</body>
</html>

...zur Frage

index.php geht nicht (xampp)?

Tach, ich habe aus langeweile eine Website angefangen zu programmieren und da ich in die index.html ein bisschen php packen wollte, habe ich sie index.php genannt, seitdem bekomme ich diesen error (davor ging es, als es noch index.html hieß):

Jemand eine Ahnung wie man das fixen könnte?

Code:<!DOCTYPE html>
<html lang="en">


<head>


    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HallOfEdits</title>
    <script src="js/homeBtns.js"></script>
    <div class="top">


        <h1 id="logo">Hall Of Edits</h1>


        <button id="login" type="button" onclick="login()">Login/Register</button>
        <button id="upload" type="button" onclick="uploadFile()">Upload</button>
        <button id="username" type="button" onclick="openProfile()"><button>
    </div>


</head>


<body style="background-color: #141414">
    <?php include 'session.php';?>
</body>


</html>

...zur Frage

Js Funktion funktioniert nicht?

Ich bekomme immer diese Fehlermeldung: Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')

at OnClick ((Index):16:25)

at HTMLButtonElement.onclick ((Index):33:33)

Code:

<!DOCTYPE html>

<head>

<title>Document</title>

const TextElement = document.getElementById("text");

function OnClick() {

TextElement.setAttribute('style', 'color: red;');

}

</script>

<style>

#text {

color: black;

}

</style>

</head>

<body>

<div id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, et placeat, asperiores reprehenderit praesentium esse possimus quia sed tempore, unde autem illo. Illum, voluptate laboriosam. Doloribus unde mollitia necessitatibus dicta?</div>

<button onclick="OnClick()">button</button>

</body>

</html>

Danke

...zur Frage

HTML input in JavaScript-Variable?

Wenn ich in HTML ein form ausfülle und abschicke wie bekomme ich dann das eingegeben im Input in eine JavaScript Variable. Habe provisorisch mal das hier gemacht und komme nicht weiter. Danke für eure Hilfe :)

<!DOCTYPE html>

<html>

<head>

<title>Input to Variable</title>

var input = "Wie bekomme ich den eingegebenen input hier hin?"

</script>

</head>

<body>

<button>Submit</button>

</body>

</html>

...zur Frage

Wie kann ich den Fehler bei meiner To-Do-Liste (mit HTML und JavaScript) beheben?

Mein Ziel ist es, eine To-Do-Liste mit HTML, CSS und Javascript zu erstellen. Eine Person gibt ihr To-Do ein und kann es mit ENTER oder mit dem "Bestätigen"-Button hinzufügen. Gleichzeitig wird auch die Leiste, wo man dies eingibt, wieder geleert.

Wenn man nun dort etwas eingibt und bestätigt, wird die Eingabeleiste geleert, aber das To-Do fügt sich nicht hinzu. Oder besser gesagt: Es erscheint nur für ein paar Millisekunden.

Wie kann ich den Fehler beheben (ich bin Anfänger)?

Hier der Code von der index.html-Datei:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDo Liste</title>
    <style>
      #input {
        margin: 50px;
        text-align: center;
      }
    </style>
    <script>
      function addTodo() {
        todolist.innerHTML += `${todofield.value}`;
        todofield.value= '';
      }
    </script>
  </head>
  <body>
    <form onsubmit="addTodo()">
      <div id="input">
        <input type="text" id="todofield">
        <button type="submit" for="todofield">Bestätigen</button>
      </div>
    </form>
    <div id="todolist"></div>
  </body>
</html>

Danke für eure Hilfe.

...zur Frage

HTML Text verschieben?

Ich möchte den text horizontal mittig haben justify-content und align-items gehen beide nicht


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .WelcomeTitle {
           display: flex;
           flex-direction: column;
          
            text-align: center;
            align-items: center;
            font-family: sans-serif;
        }
    </style>
    <h1 class="WelcomeTitle">Hier kommt ein Titel
        <br>
        hin der Lang ist!</h1>
</body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen