In HTML Daten aus einer anderen Datei anzeigen

Yavis · 09.05.2023

Hallo,

ich bin noch sehr neu in dem Gebiet HTML, CSS und Javascript und stehe aktuell vor folgender Situation:

Ich möchte in einer HTML-Datei_A bestimmte Werte aus einer Datei_B anzeigen lassen (HTML, Javascript, wasauchimmer).

Ich habe mir dazu überlegt mit Platzhaltern (Variablen) in Datei_A zu arbeiten und mit festen Werten (Konstanten) in Datei_B.
(Wie gesagt, ich bin Anfänger, kann sein, dass ich Begriffe anders benutze als diese in HTML&Co. verwendet werden.)

In Datei_A sollen diese Werte immer dann angezeigt werden, wenn Datei_A neu geladen oder refreshed wird.
(Ich habe im Internet nur Beispiele gefunden, bei denen man vorher einen Button klicken muss. So etwas brauche ich nicht.)

Alle Dateien befinden sich im gleichen Ordner, bzw. in dessen Unterverzeichnissen. Die HTML wird nur direkt in dem Ordner geöffnet.

Ich versuche seit Tagen mit var und let und const, mit Javascript-Befehlen und Internet-Suche eine Lösung zu finden, aber ich bin einfach zu neu, um das alles genau zu verstehen.
Vielleicht kann mir ja jemand weiterhelfen, einen Tip geben oder mit der einen oder anderen Zeile an Code aushelfen.

Vielen Dank im Voraus.

Sempervivum · 09.05.2023

Hallo Yavis und willkommen im Forum!

Ich habe mir dazu überlegt mit Platzhaltern (Variablen) in Datei_A zu arbeiten und mit festen Werten (Konstanten) in Datei_B.

Das verstehe ich so, dass Du die Werte aus Datei_B im HTML von Datei_A einfügen willst, dort wo der jeweilige Platzhalter steht, richtig?
Und ich verstehe es weiter so, dass Du die Datei_B bzgl. des Formates frei gestalten kannst?

In Datei_A sollen diese Werte immer dann angezeigt werden, wenn Datei_A neu geladen oder refreshed wird.

Das vereinfacht die Sache. Du brauchst dann die Datei_B nur mit PHP-include einzubinden und im HTML-Text die Werte ebenfalls mit PHP einzufügen. In Datei_B müssten dann die Konstanten mit ihren Werten in PHP-Syntax definiert werden.

AndreasB · 09.05.2023

Yavis schrieb:
In Datei_A sollen diese Werte immer dann angezeigt werden, wenn Datei_A neu geladen oder refreshed wird.
(Ich habe im Internet nur Beispiele gefunden, bei denen man vorher einen Button klicken muss. So etwas brauche ich nicht.)

Können wir das so verstehen, dass du möchtest, dass sich die Daten auf deiner Seite automatisch (ohne ein manuelles update) auf allen Browsern aktualisieren? Oder wie meinst du das?

Yavis · 10.05.2023

Hallo und Danke für die Rückmeldungen.

@AndreasB: Ich meine das so, dass, wenn die Seite geöffnet/geladen wird (durch einen Doppelklick auf das Icon, F5, Zugriff über einen Link) die Platzhalter in Datei_A automatisch mit den Werten aus Datei_B gefüllt werden.
Der Hintergrund ist, dass ich in verschiedenen HTML-Dateien aktuelle Werte habe, ohne dass ich diese ständig selbst aktualisieren muss. Stattdessen muss ich nur in Datei_B einen Wert verändern und wenn andere HTML-Dateien geladen werden, rufen diese den entsprechenden Wert in Datei_B ab und zeigen diesen an.

@Sempervivum: Also ich habe mich jetzt ein bißchen in HTML eingefuchst, habe heute mit HTML+CSS ein Template erstellt, für das bisher eine Excel-Tabelle benutzt wurde und bin damit schon mächtig stolz auf mich. Aber es ist auch das Maximum meiner Fähigkeiten aktuell. Ich hatte gehofft, dass es eventuell eine Lösung mit Javascript gibt und ich mich jetzt nicht auch noch mit Backend-Lösungen rumschlagen muss

Ich habe z.B. diesen Code im Internet gefunden:
Und das geht schon in die Richtung, wie ich es mir vorstelle, aber ich brauche erstmal nur einen Wert und nicht vier und ich brauche vor allem die Lösung mit dem Button nicht.

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript"
src="module1.js">
</script>
</head>

<body>
<button onclick="f()">
Click Me To Get Student Details
</button>

<div>
<p id="text" style="color

urple;
font-weight:bold;font-size:20px;">
</p>
</div>

<script type="text/javascript">
function f() {
var name = Student.name;
var age = Student.age;
var dept = Student.dept;
var score = Student.score;

var str = "Name:" + name + "\nAge: "
+ age + "\nDepartment:" + dept
+ "\nScore: " + score;

document.getElementById(
'text').innerHTML = str;
}
</script>
</body>

</html>

var Student =
{
name : "ABC",
age : 18,
dept : "CSE",
score : 90
};

Ich habe dieses Beispiel so verstanden, dass in der HTML-Datei die Anzeige stattfindet und in der Javascript-Datei die Werte gespeichert sind. Wenn ich also z.B. "ABC" zu "DEF" ändere, wird in der HTML-Datei auch "DEF" angezeigt.
Ich bekomme es nur nicht hin, dass das ganze ohne diesen Button funktioniert.

AndreasB · 10.05.2023

Yavis schrieb:
Ich habe dieses Beispiel so verstanden, dass in der HTML-Datei die Anzeige stattfindet und in der Javascript-Datei die Werte gespeichert sind.

Ja, so ist das.
Ich gehe jetzt davon aus, dass der Code unter deinem HTML Gerüst, den Inhalt der Datei module1.js darstellen soll.

Yavis schrieb:
Wenn ich also z.B. "ABC" zu "DEF" ändere, wird in der HTML-Datei auch "DEF" angezeigt.

Jain. Das passiert nicht automatisch sondern erst beim refreshen der Seite. Daher existiert in diesem Beispiel der Button, der simuliert, dass die Daten erneut "abgeruft" werden.
Wenn das automatisch passieren soll, kommst du nicht darum dich mit dem Backend deiner Seite zu beschäftigen, da die Änderungen an der Datei (Die sich ja auf deinem Server befindet) irgendwie bemerkt und dann an den Browser geschickt werden muss.

Sempervivum · 10.05.2023

Ich habe dieses Beispiel so verstanden, dass in der HTML-Datei die Anzeige stattfindet und in der Javascript-Datei die Werte gespeichert sind. Wenn ich also z.B. "ABC" zu "DEF" ändere, wird in der HTML-Datei auch "DEF" angezeigt.

Das trifft zu, allerdings wird die JS-Datei nur ein Mal bei Laden der Seite aufgerufen. D. h. wenn Du in der JS-Datei einen Wert änderst und noch Mal den Button drückst, wird diese nicht neu eingelesen. Das macht jedoch nichts, weil Du die Werte ja ohnehin nur beim Laden der Seite aktualisieren willst. Ändere den Code mal dahin gehend, dass Du den Button weg lässt und die Funktion direkt aufrufst:

Code:

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript"
src="module1.js">
</script>
</head>

<body>
<!-- Den Button brauchst Du nicht, wir kommentieren ihn aus
<button onclick="f()">
Click Me To Get Student Details
</button>
-->

<div>
<p id="text" style="color:purple;
font-weight:bold;font-size:20px;">
</p>
</div>

<script type="text/javascript">
function f() {
var name = Student.name;
var age = Student.age;
var dept = Student.dept;
var score = Student.score;

var str = "Name:" + name + "\nAge: "
+ age + "\nDepartment:" + dept
+ "\nScore: " + score;

document.getElementById(
'text').innerHTML = str;
}
// Da wir den Button tot gelegt haben, müssen wir jetzt die Funktion direkt aufrufen:
f();
</script>
</body>

</html>

Und wenn Du selbst Code postest, dann besser Codetags benutzen, die drei Punkte rechts von dem kleinen Landschaftssymbol und dann </>.

scatello · 10.05.2023

Warum nicht eine PHP-Lösung?

PHP:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div>
    <?php readfile("name_der_datei.html"); ?>
    </div>
  </body>
</html>

Yavis · 15.05.2023

Danke für die Rückmeldungen.

@scatello: Frontend/Backend-Lösungen wurden mir auch schon vorgeschlagen, aber das wird mir zu kompliziert. Ich brauche es wirklich nur ganz einfach. Es werden keine Daten hin und her transferiert, es wird nichts während der Betrachtung oder Bearbeitung aktualisiert, es geht wirklich nur ganz einfach darum, dass einmalig beim Laden der Seite ein Wert aus einer anderen Datei (Namen, Zahlen, Buchstaben/Zahlen-Kombinationen) gelesen und in einem Platzhalter eingesetzt werden soll.

@Sempervivum ich habe jetzt mal den Code nach meinem Verständnis angepasst, wenn ich allerdings die Seite öffne oder neu Lade, steht da gar nichts.

HTML:

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="module1.js"></script>
</head>

<body>

    <div>
        <p id="text"></p>
    </div>

    <script type="text/javascript">
        function f() {
            var name = Student.name;
            
            var str = "Name:" + name + ;

            document.getElementById("text").innerHTML = str;
        }

            f();
    </script>
</body>

</html>

Javascript:

var Student = {
    name : "ABC",
}

Wahrscheinlich habe ich wieder nur ein Semicolon falsch gesetzt

Und ich kapiere das ganze mit Javascript noch gar nicht.

Sempervivum · 15.05.2023

Kein Semikolon sondern hier ist das Pluszeichen am Ende überflüssig:

Code:

 var str = "Name:" + name + ;

Es dient dazu, Strings mit Variablen zu verketten. So ist es richtig:

Code:

 var str = "Name:" + name;

scatello · 15.05.2023

Yavis schrieb:
Frontend/Backend-Lösungen wurden mir auch schon vorgeschlagen, aber das wird mir zu kompliziert.

Bitte was ist an der PHP-Lösung kompliziert? Da ist das JavaScript-Gehampel komplizierter.

Yavis · 15.05.2023

@Sempervivum: hm, also selbst mit der Änderung gibts immer noch keine Anzeige. Weder beim Öffnen der Datei noch beim Refreshen.

@scatello: ist PHP denn auch standardmäßig verfügbar, so wie HTML, ohne zusätzliche Programme? Oder muss ich für PHP irgend etwas installieren?

Sempervivum · 15.05.2023

Ich habe jetzt Mal eine Testdatei damit gemacht und sie funktioniert einwandfrei, wenn ich den Fehler behebe.
Kann es sein, dass deine Javascript-Datei "module1.js" in einem Unterverzeichnis liegt?

scatello · 15.05.2023

Yavis schrieb:
ist PHP denn auch standardmäßig verfügbar

Das kannst du im Control-Panel deines Webspaces nachsehen.

Yavis · 16.05.2023

Sempervivum schrieb:
Ich habe jetzt Mal eine Testdatei damit gemacht und sie funktioniert einwandfrei, wenn ich den Fehler behebe.
Kann es sein, dass deine Javascript-Datei "module1.js" in einem Unterverzeichnis liegt?

Mal wieder ein Fehler beim Anwender: ich habe die Javascript-Datei umbenannt aber nicht im Code. Jetzt funktionierts genau so, wie ich es mir vorgestellt habe. Besten Dank dafür.

Der nächste Schritt wäre jetzt, das gleiche für mehrere Werte in verschiedenen HTML-Dateien umzusetzen.

Ich gehe mal davon aus, dass ich in der js-Datei einfach weitere "var"-Elemente einfüge.

Und in den entsprechenden HTML-Dateien kopiere ich in den "Head" einfach die Script-Zeile, achte dabei auf den richtigen Dateipfad und füge den restlichen JS-Code ganz unten in der HTML-Datei ein.

Richtig so?

Sempervivum · 16.05.2023

Richtig so?

Ich denke schon. Das Javascript unten wird sich dann wahrscheinlich in den einzelnen Dateien unterscheiden weil unterschiedliche Variablen und unterschiedliche HTML-Element verwendet werden.

scatello · 16.05.2023

Wieso du so stur bei JavaScript bleibst, bleibt dein Geheimnis.

Yavis · 17.05.2023

Ich habe jetzt mal auf die schnelle ein kleines Beispiel erstellt, wie ich das gewonne Wissen ungefähr umsetzen würde.

Mag jetzt für den einen oder anderen nicht hübsch sein, aber für mich reicht es erstmal:

HTML:

<html>

<head>
    <link rel="stylesheet" href="Format.css">
    <script type="text/javascript" src="Datei_B.js"></script>
</head>

<body>

    <div class="Table">
        <div class="Haus1">Haus</div>
        <div class="Haus1Data"><p id="test1"></p></div>
        <div class="Haus2">Haus</div>
        <div class="Haus2Data"><p id="test2"></p></div>

        <div class="Item1">Item 1</div>
        <div class="Item2">Item 2</div>
        <div class="Item3">Item 3</div>
        <div class="Item4">Item 4</div>

        <div class="Art1">Art</div>
        <div class="Art1Data"><p id="test3"></p></div>
        <div class="Art2">Art</div>
        <div class="Art2Data"><p id="test4"></p></div>
    </div>

    <script type="text/javascript">
        function f() {
            var name = Haus1.name;

            var str = name;

            document.getElementById("test1").innerHTML = str;
            }

        f();

    </script>

    <script type="text/javascript">
        function f() {
            var name = Haus2.name;

            var str = name;

            document.getElementById("test2").innerHTML = str;
            }

        f();

    </script>

    <script type="text/javascript">
        function f() {
            var name = Art1.name;

            var str = name;

            document.getElementById("test3").innerHTML = str;
            }

        f();

    </script>

    <script type="text/javascript">
        function f() {
            var name = Art2.name;

            var str = name;

            document.getElementById("test4").innerHTML = str;
            }

        f();

    </script>
</body>

</html>

CSS:

.Table {
    height: 100vh;
      width: 100vw;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));   
    grid-template-rows: repeat(auto-fill, minmax(25px,1fr));
    grid-gap: 0;
    margin: 0;
    margin-left: 5px;
    margin-right: 5px;
}

.Haus1 {
    grid-column: 2;
    grid-row: 3;
    background-color: #D3D3D3;
    border: 1px solid black;
    padding: 3 0 0 3;
}

.Haus1Data {
    grid-column: 3;
    grid-row: 3;
    border: 1px solid black;
    text-align: right;
    padding-right: 3;
}

.Haus2 {
    grid-column: 2;
    grid-row: 8;
    background-color: #D3D3D3;
    border: 1px solid black;
    padding: 3 0 0 3;
}

.Haus2Data {
    grid-column: 3;
    grid-row:8;
    border: 1px solid black;
    text-align: right;
    padding-right: 3;
}

.Item1 {
    grid-column: 5;
    grid-row: 3;
    border: 1px solid black;
    text-align: center;
    padding-top: 2;
}

.Item2 {
    grid-column: 5;
    grid-row: 4;
    border: 1px solid black;
    text-align: center;
    padding-top: 2;
}

.Item3 {
    grid-column: 5;
    grid-row: 5;
    border: 1px solid black;
    text-align: center;
    padding-top: 2;
}

.Item4 {
    grid-column: 5;
    grid-row: 6;
    border: 1px solid black;
    text-align: center;
    padding-top: 2;
}

.Art1 {
    grid-column: 7;
    grid-row: 3;
    border: 1px solid black;
    text-align: center;
    padding-top: 2;
}

.Art1Data {
    grid-column: 8;
    grid-row: 3;
    border: 1px solid black;
    text-align: center;
    padding-top: 2;
}

.Art2 {
    grid-column: 7;
    grid-row: 8;
    border: 1px solid black;
    text-align: center;
    padding-top: 2;
}

.Art2Data {
    grid-column: 8;
    grid-row: 8;
    border: 1px solid black;
    text-align: center;
    padding-top: 2;
}

Javascript:

var Haus1 = {name: "XYZ"}

var Haus2 = {name: "ABC"}

var Art1 = {name: "Blau"}

var Art2 = {name: "Gr&uumln"}

Ich habe dazu noch folgende Fragen bitte: kann man das in HTML/CSS/JS irgendwie vereinfachen?
- also kann man in HTML/CSS z.B. die Elemente Item1-Item4 auf weitere Zeilen in der gleichen Spalte darstellen, ohne dass ich für jedes Element wieder eine neue Beschreibung in CSS eingeben muss?
- Warum werden die Variablen nach unten versetzt angezeigt? Ich könnte natürlich mit Padding arbeiten, um dass zu korrigieren. Ich würde aber einfach gerne verstehen, warum das so komisch angezeigt wird.
- Kann ich den JS-Code irgendwie vereinfachen, um mit mehreren Platzhaltern zu arbeiten, oder muss ich einfach für jeden Platzhalter den gleichen JS-Code kopieren und einfügen?

Vielen Dank schon mal für alle hilfreichen Antworten im Voraus.

Sempervivum · 17.05.2023

Auf jeden Fall kannst Du das Javascript stark vereinfachen:

Wenn es nur ein Element hat, macht ein Objekt keinen Sinn.
Du kannst die gesamten Aktionen in einer Javascript-Funktion zusammen fassen.

Also die Datei mit den Definitionen so:

Code:

const
    nameHaus1 = "XYZ",
    nameHaus2 = "ABC",
    nameArt1 = "Blau",
    nameArt2 = "Gr&uumln";

Und die Verarbeitung so:

Code:

 <script>
        function doIt() {
            document.getElementById("test1").innerHTML = nameHaus1;
            document.getElementById("test2").innerHTML = nameHaus2;
            document.getElementById("test3").innerHTML = nameArt1;
            document.getElementById("test4").innerHTML = nameArt2;
       }
       doIt();
  </script>

Der nächste Schritt wäre dann, das Ganze mit einer Schleife zu realisieren, dann würde es wieder Sinn machen, die Daten in einem Objekt zusammen zu fassen mit der ID als Schlüssel und dem Namen als Wert. Das hätte dann den Vorteil, dass Du Daten und Verarbeitung getrennt hast und nur die JS-Datei mit den Daten ändern musst, wenn etwas hinzu kommt.

Sempervivum · 17.05.2023

Warum werden die Variablen nach unten versetzt angezeigt?

Das liegt daran, dass ein p-Element oben und unten ein margin bzw. Außenabstand hat. Verwende statt dessen <span>, dabei ist das nicht der Fall.

- also kann man in HTML/CSS z.B. die Elemente Item1-Item4 auf weitere Zeilen in der gleichen Spalte darstellen, ohne dass ich für jedes Element wieder eine neue Beschreibung in CSS eingeben muss?

Da diese Elemente in der selben Spalte stehen, kannst Du ihnen eine gemeinsame Klasse zuweisen:

Code:

        <div class="item item1">Item 1</div>
        <div class="item item2">Item 2</div>
        <div class="item item3">Item 3</div>
        <div class="item item4">Item 4</div>

Dann brauchst Du die Spalte nur ein Mal festzulegen:

Code:

        .item {
            grid-column: 2;
            border: 1px solid black;
            text-align: center;
            padding-top: 2;
        }

        .item1 {
            grid-row: 1;
        }

        .item2 {
            grid-row: 2;
        }
        /* usw. */

Weitere Hinweise zur Vereinfachung:
Es hat sehr den Anschein, dass das linke Feld bei Haus und Art jeweils ein Label für den Wert im rechten Feld ist. In dem Fall kannst Du beide zusammen fassen:

Code:

        <div class="haus haus1">
            <span class="label">Haus</span>
            <span class="data" id="test1"></span>
        </div>

Dann kannst Du über die Klassen .label und . data das Aussehen und die Ausrichtung für alle gemeinsam fest legen. Und weil .haus und .art jeweils in der selben Spalte liegen, jeweils diese nur ein Mal festzulegen.
Weiter kannst Du auf die Leerspalten verzichten, wenn Du statt dessen die Anweisung "column-gap" verwendest.
Und ich würde es hübscher finden wenn die Inhalte alle sowohl horizontal als auch vertikal zentriert wären, das lässt sich sehr gut mit Flexlayout machen:

Code:

.Table span, .Table .item {
    display: flex;
    align-items: center;
    justify-content: center;
}

In HTML Daten aus einer anderen Datei anzeigen

Yavis

Member

Sempervivum

Well-known member

AndreasB

Well-known member

Yavis

Member

AndreasB

Well-known member

Sempervivum

Well-known member

scatello

Well-known member

Yavis

Member

Sempervivum

Well-known member

scatello

Well-known member

Yavis

Member

Sempervivum

Well-known member

scatello

Well-known member

Yavis

Member

Sempervivum

Well-known member

scatello

Well-known member

Yavis

Member

Sempervivum

Well-known member

Sempervivum

Well-known member

In HTML Daten aus einer anderen Datei anzeigen

In HTML Daten aus einer anderen Datei anzeigen