Beiträge von AndreasB

Sempervivum Genau! Das ist auch der Grund weshalb die Methode getElementsByClassName heist.

getElementByClassName existiert nicht.

Marcus2010 Schon allein deshalb sollte dein Code nicht funktionieren. (Dieser Fehler sollte dir aber auch in der Konsole angezeigt werden.)

du bindest Bilder und Videos meist mit relativen Pfaden (von der aktuellen HTML Datei aus gesehen ein.

Dieser Pfadmuss auch auf dem Server existieren, auf dem du die Seite hostest, sonst werde die Ressourcen nicht geladen.

Vielleicht hilft dir das auch:

https://wiki.selfhtml.org/wiki…nks/Referenzieren_in_HTML

Ich schieß mal ins Blaue und sage, die Pfade auf deinem lokalen Rechner und auf dem Server stimmen nicht überein.

Für mehr raten, brauchen wir auch mehr Hinweise.

Da hast du viele Möglichkeiten.

Eine der einfachsten Wege ist es eine css Klasse dynamisch zu setzen.
Du musst natürlich in deiner CSS zuerst die Einzelnen Klassen erstmal definieren.

// Wenn du noch nicht so viel JS Erfahrung hast, würde ich dir empfehlen, nich so kompliziert zu denken. 
// Das ist natürlich nur ein Beispiel, dass du 


// 1. Als erstes müssen wir natürlich erstmal die aktuelle URL abfragen.
const currentUrl = window.location.href;

// 2. Dann speichern wir uns eine default Klasse an der wir auch erkennen können,
// ob die nachfolgenden Abfragen greifen oder nicht.
let logoCssClass = 'logo--default';

// 3. Danach vergleichen wir nacheinander dir URL mit den teilen, die Wir suchen
// Wenn wir einen Teil Finden, speichern wir uns einen anderen Style in der Variablen,
if (currentUrl.indexOf('A.com') > -1) {
    logoCssClass = 'logo--a'
} else if (currentUrl.indexOf('B.com') > -1) {
    logoCssClass = 'logo--b'
} else if (currentUrl.indexOf('C.com') > -1) {
    logoCssClass = 'logo--c'
}

// 4. Anschließend  holen wir uns das Logo, dem wir den Style zuweisen wollen.
// Den Selektor musst du natürlich selber anpassen.
const logoElement = document.querySelector('.logo');

// 5. Dann setzen wir die vorbereitete Klasse auf das Element.
logoElement.classList.add(logoCssClass);

Ich hoffe das hilft dir.

Hallo Schwebbs,

über reines CSS ist es nicht möglich die URL abzufragen.

Du könntest aber zum Beispiel jeweils eine eigene CSS-Datei nur für das Logo anlegen und in jeder html eine andere davon einbinden.

Oder das ganze über JS dynamisch setzen.

Dein Problem entsteht dadurch, dass einige Browser bei einem touchstart Event die Pseudoklasse :hover setzen.

schau' dir mal das an:
https://medium.com/@mezoistvan…touchscreens-c498af39c31c

Zitat von learningjavascript

Gibt es dann nicht irgendwie einen Weg das ich alles in den gleichen Code schreiben kann.

Natürlich geht das.
Was steht denn in der Datei, die du laden willst?


Um das Ganze zu debuggen kannst du:

1. Du könntest den .then Aufruf nach dem .fetch ein wenig erweitern

.then(res => {
    console.log('Response', res);
    return res.json()
})

Dadurch würdest du den Response in die Konsole Loggen und sehen, welche Daten du empfängst.

2. Was ich in #4 schonmal angedeutet hatte: Schau in den Network-Tab deiner Developer Tools. Dort siehst du alle Requests und Responses und dort kannst du gut sehen, welche URL du anfragst und auch welcher Response zurück kommt.

Zitat von Sempervivum

[...]

In dem Fall liefert der Server eine Fehlerseite aus und weil diese nicht im JSON-Format ist, kommt es zu dem Fehler:

[...]

Das sehe ich nicht so.
Wenn die angeforderte Date nicht gefunden wurde, würde der Fehler
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 fetch('foo').then(d => d.json()).catch(console.log)

Sagen, denn der Browser versucht eine Webseite als JSON zu parsen. und scheitert an dem DOCTYPE.

Uncaught (in promise) SyntaxError: Unexpected token } in JSON at position 112

Sieht eher nach einem nicht validen JSON aus.

Die Datei wird gefunden, nur ist der Inhalt der Datei kein gültiges JSON.

Dann findet er die Datei, di du laden möchtest nicht.

Da ich deine Daten nicht kenne, kann ich dir dabei nicht helfen.
Du kannst ja mal in den "Network-Tab" deiner Developer-Tools schauen, da siehst du den Request nochmal und kannst genau schauen, welcher Dateipfad nicht gefunden wird.

Erstmal: Was sagt denn deine Konsole?

Dann hast du hier einen Fehler:

for(x=0;x<waeh.length;x++){
 // ...
}

Ein Object (in deinem Fall waeh) hat keine Eigenschaft "length".

Also ist "from_currencyEl" leer und du kannst natürlich keinen Wert auslesen.

besuch mal die offizielle Seite für JSON: https://www.json.org/json-en.html
Hier wird sehr deutlich definiert, was ein JSON ist.

Hallo halgo,

bei dir geht das mit dem asynchronen und dem synchronen ziemlich durcheinander.

/* ... */
createView() {
    const content = this.loadText().then((filecontent) => {
        return filecontent;
    });

    // Hier liegt das Problem
    return html`${content.text}`;
}
/* ... */

Hier hast du ein Timing Problem. Zu dem Zeitpunkt, an dem du von der Funktion returnst, ist das Promise. noch nicht fulfilled.

Daher bekommst du ein Pending Promise.

Schau' dir mal das an:

Making asynchronous programming easier with async and await (mdn)

Ein Tip für den Anfang:

entscheide dich für ENTWEDER async / await ODER then / catch / finally

nicht für beides gleichzeitig.

Hallo ileFix,

das muss so aussehen:

function Suchen() {
    event.preventDefault();
    /* ... */
}

Erklärung:

Du musst das Formular daran hindern, dass es "abgeschickt" wird. Ansonsten lädt die Seite neu.

Das machst du mit der Methode preventDefault auf dem Eventobjekt.

Da du allerdings, die Such-Methode mit einem Eventlistener aus dem DOM Level 1 onsubmit="" implementiert hast, wird das Eventobjekt nicht automatisch übergeben.

Daher musst du das globale Eventobjekt aus dem DOM verwenden: window.event.

Übrigens:

Ich würde immer empfehlen, die Eventlistener aus DOM Level 2 zu verwenden, EventTarget.addEventListener() der hat unter Anderem, den Vorteil, dass das Eventobjekt direkt mit übergeben wird.

Zitat von Simuletsplay

Also in der Datei gibt es gar keine 425 Zeilen...

Es geht um diese Zeile

document.addEventListener("DOMContentLoaded", () => {
  function counter(id, start, end, duration) {
    let obj = document.getElementById(id),
      current = start,
      range = end - start,
      increment = end > start ? 1 : -1,
      step = Math.abs(Math.floor(duration / range)),
      timer = setInterval(() => {
        current += increment;
        obj.textContent = current; // <- HIER ist obj null !
        if (current == end) {
          clearInterval(timer);
        }
      }, step);
  }

  // Wenn ich das richtig sehe, gibt es in deinem Script keine Element
  // mit den ids count1, count2 oder count3.
  counter("count1", 0, 5, 1500);
  counter("count2", 0, 15, 1500);
  counter("count3", 0, 283, 1500);
});

Zu deinem Problem:
Wenn ich das richtig verstehe, möchtest du, dass alle Bilder die gleiche Höhe haben, ausgehend von dem höchsten Bild.

Da sich die Höhe der Bilder an denen der Boxen orientiert, müssen dann auch alle Boxen gleich hoch sein.

Die Höhe einer Box orientiert sich an dem Textinhalt.

Du müsstest also

1. den Kompletten Textinhalt rendern.
2. Die höchste Box herausfiltern.
3. Diese Höhe auf alle anderen Boxen anwenden.

Dadurch sollten alle Bilder die gleiche höhe haben.

Bei sehr großen Boxen, kann es nur sein, dass man nicht mehr viel von den Bildern sieht, da der Ausschnitt zu eng ist.

Diese Idee höre ich das erste Mal und ich denke nicht, dass man das mit Bootstrap hinbekommt.

Ohne custom JavaScript, kommst du da wahrscheinlich nicht weit.

Nachtrag:
Ich habe gerade experimentiert, und herausgefunden, dass du das auch mit CSS Grid machen kannst:
(Also, dass jede Box die gleiche Höhe hat)
https://codepen.io/Mr_Beer/pen/JjRwjxX?editors=1100

Mit Bootsrap 4 geht das aber wohl nicht, grid ist erst ab Bootstrap 5 eingebaut.

Was meinst du genau mit

Zitat von Simuletsplay

[...] Alle Bilder müssen gleich groß ausgegeben werden.

?

Das ist ein wenig vage.

Meinst du in der Breite oder in der Höhe oder beides?
Soll dann das ganze Bild zu sehen sein, oder nur ein Ausschnitt?

• Wenn nur ein Ausschnitt zu sehen sein soll, welcher Ausschnitt soll es sein?
• Wenn das ganze Bild zu sehen sein soll, was soll an den Stellen zu sehen sein, an denen das Bild kleiner als der Rahmen ist?

Sollen auch alle Container gleich breit oder/und hoch sein?

Übrigens:
Schau mal in die Konsole. Ich bin schon bei 186437 Fehlern. Uncaught TypeError: Cannot set property 'textContent' of null at index3.php:425

haglo schau' dir mal das an: https://codepen.io/Mr_Beer/pen/mdrzQjX
Vielleicht hilft dir das bei der Dynamischen Konfiguration deines Menüs.

Wenn du eine SPA anstrebst,

hast allerdings noch ein Problem mit dem Routing.

es sollte so funktionieren, dass man die Seiten nicht nur über die Navigation, sondern auch über eine Änderung der URL erreichen kann.

Zitat von haglo

Frage: Ist so etwas in einer SPA via HTM & CSS möglich?

Eine SPA funktioniert so, dass man

1. auf der Aktuellen Seite Bleibt und nur den Content austauscht. (Dies wird mit JavaScript umgesetzt)
2. Der komplette Content sich auf einer sehr langen Seite befindet, und man sich scrollend durch die Webseite bewegt. (Das geht mit reinem HTML/CSS)

HTML bietet dir nur die Möglichkeit mit Hilfe von Ankern auf eine weitere (Web)-Seite zu verlinken, oder auf der Aktuellen Seite hin und her zu springen.

Wenn du also das Ganze mit reinem HTML/CSS umsetzen möchtest, bleiben dir nur diese Möglichkeiten.

Du könntest zB eine lange Seite gestalten, auf der Jeder Abschnitt seine eigene horizontale Navigation enthällt und auf der du mit der Hauptnavigation an den Jeweiligen Abschnitt springst.

Wie hast du dir denn vorgestellt wie was beim Navigieren passieren soll?

Wenn du alle Freiheit haben möchtest, benötigst du allerdings JavaScript.

Schau mal in die Konsole deines Browsers

achso.

Dann erstelle dir eine CSS Klasse, die den gewünschten Effekt anwendet und weise diese beim Klick dem Bild zu.