HTML5 - die besten Fragen

Verwandte Themen

Rike456

16.11.2023, 21:29

Mit Bildern

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')?

Hi bräuchte Hilfe bin noch komplette Anfängerin, das ist mein erstes Projekt mir js und kriege es nicht hin den Fehler zu beheben. Hab schon vieles Versucht nichts hat geklappt also hier mal die wichtigesten Schnipsel meiner Website vielleicht kann ja jemand den Fehler finden :D

Head:

Style:

HTML:

js:

dev tools:

Sorry das das so viel ist :///

3 Antworten

MrOsmo

14.11.2023, 19:38

Mit Bildern

JavaScript Hilfe?

Hallo,

wir müssen mithilfe von "Nested Loops" und mit "for "so ein Ergebnis rauskriegen (Siehe Bild):

Ich weiss aber nicht wie... könnte mir jmd schnell helfen, da ich gleich schlafen gehen muss... Dankeschön im Voraus!

2 Antworten

MrOsmo

14.11.2023, 16:45

Kommentar JavaScript/CSS/HTML?

Hallo,

ich arbeite mit der VSC und weiss immer noch nicht wie man schnell mit den Tasten auf der Tastatur Kommentare erstellt. Könnt ihr helfen? dankeschön im Voraus!
LG

1 Antwort

BruceWayne873

13.11.2023, 20:45

Beitrag wurde 1 Mal erneut eingestellt

Mit Javascript anfangen ohne wirkliche Programmiererfahrung?

Kann ich ohne große Programmierkenntnisse direkt mit JavaScript programmieren anfangen und nebenbei CSS auch lernen?

Ich habe nur etwas Erfahrung in C# aber mehr nicht.

5 Antworten

VybsGF

13.11.2023, 17:33

Mit Bildern

Scroll Down Button und Back to Top?

Hallo,

ich möchte für eine Website, welche ich für die Schule machen soll, einen Scroll Down Button programmieren, welcher mich beim drauf drücken nach untem zum Inhalt scrollt (Startpunkt ist der Seitenanfang, in meinem Fall ein Bild. Der Inhalt kommt erst nach dem Bild)

Außerdem möchte ich dann auch einen Back to Top Button, welcher mich dann wieder an den Seitenanfang bringt.

Der Scroll Down Button sollte 3 Pfeile sein, welche von oben nach unten blinken. Und der Back to Top Button sollte ein einfacher Kreis

unten rechts sein, mit einem Pfeil nach oben und die Box sollte die Farbe ändern, wenn man mit dem Cursor drauf ist.

Ich habe mal Beispielbidler angefügt

Dafür soll ich JavaScript benutzen.
Leider finde ich nichts passendes im Internet und frage deshalb hier um Hilfe.

Grüße Alex

2 Antworten

RedDevil1982

11.11.2023, 15:49

HTML, CSS, Javascript EventHandler und .innerText?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test DOM Manipulation</title>
    <script src="inner.Text.js" defer></script>
</head>
<body>

<div>
    <button id="button">click me</button>
    <input type="submit" id="Einreichen" name="Einreichen" value="Testen">
</div>

</body>
</html>
const meinBody = document.body;
const e1 = document.createElement('div');

const innerText1 = "Programmieren ";
const innerText2 = document.createElement("b");
innerText2.innerText = "3";
const innerText3 = " FTW!";

e1.append(innerText1, innerText2, innerText3);
meinBody.append(e1);

const button = document.getElementById('button');

button.addEventListener('click', () =>  {
button.innerText = "Klicken";}

Wenn ich den button klicken, warum wird dann das click me nicht durch Klicken ersetzt?
Warum wird das meinBody.append(e1); nicht ausgeführt?

MFG

1 Antwort

Ramazan79

11.11.2023, 11:53

Mit Umfrage

Verwendet ihr Bootstrap?

Ja 50%

Nein 50%

3 Antworten

Gitim510

10.11.2023, 17:51

Mit Bildern

html Widget programmieren mit Django Datenbank?

Hallo,

ich habe eine Django Datenbank erstellt, und möchte mein html Widget für meine Webseite damit verwalten. Die Datenbank funktioniert soweit, ich kann Datensätze hinzufügen, bearbeiten und entfernen. Wenn ich den Link in den Browser eingebe wird meine Tabelle im Browser auch mit allen Daten angezeigt und aktualisiert wenn ich in der Datenbank etwas ändere. Bette ich den html code nun aber in meine Webseite ein, wird die Tabelle angezeigt, aber ohne den Inhalten aus der Datenbank. Kann mir bei dem Problem vielleicht jemand helfen.

Vielen Dank schonmal im Voraus.

Das ist der html Code:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Stil für die gesamte Tabelle */
    table {
      border-collapse: collapse;
      width: 65%;
      margin: 20px auto;
      border: 1px solid #ccc;
      position: relative;
    }
    th, td {
      text-align: left;
      padding: 8px;
      border-right: 1px solid #ccc;
    }
    th {
      background-color: #8B0000;
      color: white;
      text-align: left;
    }
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    tr:nth-child(odd) {
      background-color: #ffffff;
    }
    td:last-child {
      border-right: none;
    }
    th:nth-child(1), td:nth-child(1),
    th:nth-child(4), td:nth-child(4) {
      width: 100px;
    }
    td:nth-child(2), th:nth-child(2),
    td:nth-child(3), th:nth-child(3) {
      width: 85px;
    }
    h1 {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Nächste Veranstaltungen</h1>
  <table>
    <tr>
      <th>Titel</th>
      <th>Datum</th>
      <th>Zeitraum</th>
      <th>Örtlichkeit</th>
    </tr>
    <!-- Schleife für die Anzeige der nächsten drei Veranstaltungen -->
    {% for event in upcoming_events %}
    <tr>
      <td>{{ event.Titel }}</td>
      <td>{{ event.Datum|date:"l, j. F Y" }}</td>
      <td>{{ event.Zeitraum }}</td>
      <td>{{ event.Örtlichkeit }}</td>
    </tr>
    {% endfor %}
  </table>
</body>
</html>

2 Antworten

Ramazan79

10.11.2023, 17:35

Mit Umfrage

JavaScript vs. Flutter und Dart?

Was findet ihr besser?

HTML, CSS und Javascript

Oder

Dart und Flutter

JavaScript mit HTML und CSS 75%

Dart und Flutter 25%

2 Antworten

FragenFrager176

07.11.2023, 11:27

Website responsive machen?

Wie kann man eine bestehende Website aus HTML, CSS und JS responsive machen? Also so, dass sie für jedes Gerät angepasst wird und überall gut ausschaut? Und welche Pixelgröße nimmt man da? Es gibt ja verschieden Große Bildschirme und Handys?

4 Antworten

SusgUY446

06.11.2023, 15:34

Mit Bildern

Mit Links

font-awesome werden nicht gelanden?

mein code:

<a href="https://github.com">
<button class="github"><i class="fa-brands fa-github"></i> Github</button>
</a>

1 Antwort

MrOsmo

03.11.2023, 20:11

Mit Bildern

HTML UND CSS HILFE?

Guten Abend zusammen!
wie macht man solche Linien, sodass man da drauf was schreiben kann? Bitte helft mir, denn das ist die einzige Sache, die ich nicht verstanden habe. Und ja, "Element untersuchen" kann ich nicht, da es eine fremde Vorlage auf "Figma" ist. Ich hoffe auf eure Hilfen! Dankeschön im Voraus!

1 Antwort

RedDevil1982

03.11.2023, 10:34

HTML, CSS @media query?

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DarkModeTest</title>

    <style>

        :root {
            --textColor: black ;
            --backgroundColor: white;
            --accentlighter1: blue;

        }

        @media (prefers-color-scheme: dark) {

            /* Anpassungen im Dunkelmodus */
            --textColor: white;
            --backgroundColor: black;
            --accentlighter1: orange;

            body {
                background-color: var(--backgroundColor);

            }

            a {
                color: var(--accentlighter1);;
            }

            h1, h2, h3 {
                color: var(--textColor);
            }
        }

        @media (prefers-color-scheme: light) {
            body {
                /* Anpassungen im Dunkelmodus */
                background-color: var(--backgroundColor);
            }

            a {
                color: var(--accentlighter1);
            }

            h1, h2, h3 {
                color: var(--textColor);
            }

        }
    </style>

</head>
<body>
<h1>Überschrift 1</h1>
<p>Das ist ein Beispieltext. <br> <a href="#">Hier ist ein Link.</a></p>
</body>
</html>

Ich führe die Datei aus. Befinde mich im prefers-color-scheme: light

passt alles.

Nun wechsle ich über Einstellungen, Personalisierung, Modus auswählen zu Dunkel.

Die @media (prefers-color-scheme: dark) wird nicht ausgelöst.

Warum? Die Schrift bleibt wie bei prefers-color-scheme: light?

1 Antwort

MrOsmo

01.11.2023, 12:42

Padding und margin?

Hallo,

wann benutzt man margin und wann padding? Dennn beide machen ja denselben Abstand und wo ist der Unterschied? Danke im Voraus für eure zukünftige Antworten!)))
LG

3 Antworten

SusgUY446

30.10.2023, 10:58

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>

3 Antworten

SusgUY446

29.10.2023, 19:13

Mit Bildern

External css funktioniert nicht?

Wenn ich das css in ein styletag mache funktioniert es aber sobald es in der css datei ist funktioniert es nicht mehr

.form {
    margin-top: 10px;
}
.input-field {
    margin-bottom: 10px;
}

(Mit css datei)

(Mit style tag)

2 Antworten

SusgUY446

28.10.2023, 19:22

Mit Bildern

text in input form centern?

Wie kann man denn text centern?

<div class="input-field">
   <input type="text"name="username"placeholder="Username"class="username-input" required>
</div>
<div class="input-field">
   <input type="password" name="pw" placeholder="Password" class="password-input" required>
</div>

1 Antwort

ForumLibhaber

27.10.2023, 23:08

Beitrag wurde 1 Mal erneut eingestellt

Text aus anderem Dokument in HTML Webseite verknüpfen?

Angenommen, ich hätte 2 HTML Dokumente 1.HTML und 2.HTML und in beiden werden z.B. alle Windows Versionen aufgezählten. Jetzt kommt Windows 12 hinzu. In diesem fall muss ich jetzt überall Windows 12 Hinzufügen.

Gibt es die Möglichkeit eine Datei Windows Versionen.[Dateiformat] zu erstellen, in der die Aufzählung eingetragen ist, so dass ich in 1.HTML und 2.HTML den Link von Windows Versionen.[Dateiformat] einfüge, und beide automatisch auf die Datei zugreifen, wo die Liste drin ist, und die Daten anzeigen?

Geht dass?

Welche Programmiersprache muss ich verwenden?

Wie füge ich die Dateien in HTML ein?

Könnt ihr mir ein Beispiel zeigen?

3 Antworten

Vimita

27.10.2023, 17:54

Mit Bildern

Warum passiert das mit meinem HTML Code?

Folgendes: ich bin gerade dabei eine Schriftart von Google-fonts in ein HTML Dokument du importieren. Das Problem ist, dass der ganze Code anders formatiert wird, sobald ich den Link einfüge. Fast so, als ob kein schließender Tag vorhanden ist.

Das Dokument in dem das Problem zuallererst aufgetreten ist ist lang, weswegen ich ein kleines Beispiel in einem eigens dafür verwendeten Code hinzufüge, es ist überall das selbe.

Kann mir jemand sagen, ob diese Farbänderung nach dem </head> normal sind? Wenn nein, was sollte ich ändern?

4 Antworten

Ramazan79

27.10.2023, 12:47

Warum funktioniert das nicht?

Das erste If funktioniert, aber das zweite nicht. Es geht um JavaScript.

let hamburger = document.getElementById("button");
let sidebar = document.getElementById("sidebar")



sidebar.style.right = "150px";
sidebar.style.position = "relative";


hamburger.addEventListener("click", function() {
    if (sidebar.style.right = "150px") {
        sidebar.style.left = "0"
     
    } if(sidebar.style.left = "0") {
        sidebar.style.right ="150px"


    }
});

4 Antworten

Verwandte Themen

Meistgelesene Beiträge zum Thema HTML5