HTML: Zwei Seiten miteinander interagieren lassen?

Hallo,

ich habe ein HTML-Dokument mit einer div, die einen Text enthalten soll, der auf einer anderen mit einem input eingegeben wird. Das heißt, das zwei HTML-Dokumente miteinander interagieren sollen.

Seite 1: In Input wird text "x" eingegeben

Seite 2: text "x" erscheint.

Wie kann ich das möglich machen? Reicht JavaScript dafür aus?

Die Dateien sind lokal im selben Ordner gespeichert.

Vielen Dank im Voraus!

3 Antworten

BeamerBen

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, programmieren

04.10.2021, 20:22

Auf dem selben Browser würde ich zuerst an einen SharedWorker denken, hab damit aber noch nie gearbeitet. Das geht über JavaScript auf dem Client.

Bei unterschiedlichen Nutzern braucht man natürlich irgendeine Kommunikationsschnittstelle wie WebRTC oder einen Server. Aber auch bei WebRTC müssten da ja irgendwie die Browser aneinander vermittelt werden. Also bräuchte man da natürlich einen zentralen Server irgendwie.

JavaScript kann man aber über Nodejs (und Deno, wobei ich da nicht weiß wie weit das Projekt ist) auch auf Servern verwenden, daher reicht JS auf jeden Fall. Du meinst vermutlich eher ob man dafür einen Server braucht oder nicht.

Woher ich das weiß:Berufserfahrung – Software Entwickler / Devops

MrAmazing2

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, programmieren

04.10.2021, 20:27

Wenn die eine Seite (wo man den Text eingibt) auf die andere Seite (wo er angezeigt wird) weiterleitet, dann könnte man das mit Query Parametern umsetzen.

Ansonsten musst du das per Backend machen.

Woher ich das weiß:Hobby – Programmieren ist mein Hobby & Beruf

verreisterNutzer

04.10.2021, 20:20

Die gleiche Script Datei nutzen die getElementById(...) Nutzt. Die Variable X wird dann in beiden divs genutzt. Nenne die divs mit den selben Namen

regex9

05.10.2021, 04:11

Es geht um zwei verschiedene Seiten. Selbst wenn sie die gleiche Skriptdatei verwenden, teilen sie sich deswegen nicht denselben Speicher.

verreisterNutzer

05.10.2021, 17:15

@regex9

Doch. Wenn sie im selben Ordner sind. 2 .HTML und 1 .js

HTML 1:'<p id="text"></p>'

Html 2: '<p id="text"></p>'

Js:'var texte = "x";

var te = document.getElementById("text");

te.innerHTML = texte;'

Könnte Fehler haben da ich auf mein Handy geschrieben habe.

regex9

05.10.2021, 18:49

@verreisterNutzer

Dein Beispiel bewirkt nur, dass beide Dokumente ein Skript mit denselben Anweisungen einbinden. Trotzdem besteht keine Verbindung. Würde texte in Dokument 1 den Wert abc bekommen (bspw. nach einem Buttonklick), würde er sich in Dokument 2 nicht ändern.

verreisterNutzer

05.10.2021, 19:30

@regex9

Das stimmt. Das ist (soweit ich weiß) unmöglich. Oder?

regex9

05.10.2021, 20:01

@verreisterNutzer

Nur über eine zentrale Datenstelle (sei es nur ein Vermittler oder ein Datenspeicher), die sich beide teilen. Skript A gibt seine Information an die Datenstelle, Skript B liest sie aus.

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

Dreieck ausgeben mit for schleife in Javascript?

Hallo,

ich wollte Fragen wie ich ein Dreieck ausgeben kann mit Javascript, dabei soll das Dreieck vorher mit einer Zahl mit "prompt" eingegeben und mit sternchen ausgegeben werden.

Am Ende sollte es so aussehen wenn man z.B. die Zahl 4 eingegeben hat:

***

****

Zurzeit habe ich schon einen Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript">
        function sterne(){
            var zahl = prompt("Zahl eingeben");
            for(var i =0; i <zahl; i++){
                ausgabe.innerHTML += "*" + "<br>";
            }
            
            document.querySelector('output').innerText = 
            "Anzahl der Zeilen: " + zahl;
        }
            </script>
        </head>
        <body onload="sterne()">
            <output></output>
            <br>
            <div id="ausgabe"></div>
        </body>
    </html>

Der mir das hier ausgibt:

Anzahl der Zeilen: <Zahl>

Ich vermute man braucht eine weitere For schleife oder ein if, könnte mir da jemand weiterhelfen? Danke für mögliche Antworten.

...zur Frage

Html Input in Javascript ausgeben?

Ich würde gerne einen HTML Input Text in Javascript ausgeben lassen.

Dazu habe ich bereits ein Script erstellt, in dem ich einer Variable den Wert des HTML Input gebe(Es geht um die Variable "VorName"), mit Hilfe von "document.getElementById". Allerdings will die Variable den Wert nicht annehmen/ändert ihn nicht.

Ich habe auch onclick angewendet

Warum funktioniert das nicht? ) :

Danke im voraus für Tipps und Hilfe

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

Könnt ihr mir bei folgendem JavaScript Problem helfen?

programmieren ist mein jüngstes und schwierigstes hobby, ich würd mich freuen wenn ich dieses Problem lösen könnte. Ich möchte, dass jeder Name, der im Eingabefeld eingegeben wird unten erscheint.

danke im voraus.

https://jsfiddle.net/6wcf9j5e/

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form class="guestList" action="index.html" method="post">
      <label>Your Name: </label>
      <input type="text" name="" value="..." id="nameInput;" />
      <input type="submit" name="" value="submit" onclick="pushArray();"/>
    </form>
    <div id="addName"></div>
    <script type="text/javascript" src="dailyrepead.js">
    </script>
  </body>
</html>

JS:

var guestList = [];
var count = document.getElementById("nameInput");
function pushArray() {
  guestList.push(count);
  document.getElementById("addName").innerHTML += guestList[count] +"<br>";
}

...zur Frage

Mit Javascript html tag löschen?

Beispiel:

ich bin auf irgendeiner seite

und mir passt irgendein div nicht.

macht zwar keinen sinn aber egal.

der div hat die id=„test“.

wie kann ich jz dafür sorgen mit javascript das der div verschwindet ?

könnte zwar den text der da drinne steht löschen aber dann wäre der Div noch innerhalb vom Body.

Oder auch die farbe transparent machen mit css dann würde man ihn nichtmehr sehen.

RemoveChild hat bei mir nicht funktioniert, wahrscheinlich hab ich das falsch geschrieben/ was falsches gegoogelt

...zur Frage

Mit Javascript zu einem Teil im HTML Dokument springen?

Hallo !

Ich bin gerade dabei eines meiner ersten Projekte mit JavaScript/CSS/HTML umzusetzen.

Ich bin gerade dabei eine Suchfunktion einzubauen.

Ich habe eine Layout von Material Design Lite verwendet. Ich habe es so umgesetzt, dass das ganze im einem HTML Formular steht und beim absenden (drücken der ENTER Taste) eine JavaScript Funktion ausgeführt wird. Bei dieser hole ich mir mithilfe von document.getElementById().value den Wert der eingegeben wurde und sage, dass dieser Wert auf eine Variable übertragen wird. Ich frage per If und else ab was eingeben wurde (Bsp. 1) und will dann das zum einem bestimmten Teil im HTML Text gesprungen wird.

Mein Problem :

Ich muss es irgendwie umsetzen, dass mit JavaScript Code zu einem bestimmten Teil (im HTML Text ) gesprungen wird OHNE das man auf einen Link klicken muss.

Weiß jemand von euch hier, wie das möglich ist ?

(Danke für deine Zeit, beim Lesen und Danke für jede Antwort)

Hier der Code meiner JavaScript Funktion

Hier der Code des HTML Formulars

...zur Frage

Wie kann ich eine HTML und JavaScript Login-Funktion mit nur einer Passwortmöglichkeit machen?

Ich will eine Login-Funktion für eine eigene Internetseite machen, wobei nur mein eigenes Passwort funktionieren soll. Es kommt aber immer die Meldung, dass das Passwort falsch sei.

Das ist mein Code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Seitenname | Login</title>
    <meta charset ="utf-8">
  </head>
  <body>
    <div id="wrapper">
      <header><img src="bilder/Logo.jpg" alt="Logo"></header>
      <sectionAnmeldung>
        <div class="Anmelden">
          <h1>Anmelden</h1>
          <a>Passwort:</a>
          <input type="password" name="myPw" placeholder="Password" />
          <script>
            function pwRichtig() {
              var x = document.getElementsByName("myPw").value;
              var pw = "password123";

              if (x == pw) {
                document.open("hauptseite.html");
              }
              else {
                alert("Falsches Passwort!");
              }
            }
          </script>
          <input type="submit" name="" value="Einloggen" onclick="pwRichtig()" required />
        </div>
      </sectionAnmeldung>
    </div>
  </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/Javscript Euro umrechnen?

Hallo!
Ich bin momentan am verzweifeln.

Ich probiere nun schon seit 1 Stunde einen Euro Umrechner mit Javascript zu progamieren.

Zuerst hat es auch ganz gut geklappt aber als ich mehrere gleichzeitig umrechnen wollte muss ich wohl einen Fehler gemacht haben.

Kennt sich irgend jemand aus und weiß was ich falsch gemacht habe?

Ich bedanke mich schon mal im Voraus :)

Hier der Code für den Rechner der Euro in mehrere Währungen Umrechnen soll:

<html>
<head><center>
<title>Umrechnung Euro - ? </title>
<script language="JavaScript">
function Umrechnung(){



    var EUROBetrag, DMBetrag, DOLLARBetrag, KRONENBetrag;

     EUROBetrag = document.Umrechnung.EURO.value;
     DMBetrag = document.Umrechnung.DM.value;
     DOLLARBetrag = document.Umrechnung.DOLLAR.value;
     KRONENBetrag = document.Umrechnung.KRONEN.value;



    EUROBetrag = DMBetrag / 1.95583;
    EUROBetrag = DOLLARBetrag / 1,13370;
    EUROBetrag = KRONENBetrag / 7,44;

  document.Umrechnung.DM.value=DMBetrag;
  document.Umrechnung.DOLLAR.value=DOLLARBetrag;
  document.Umrechnung.KRONEN.value=KRONENBetrag;

}// Ende
</script>
</center>
</head>

<body><center>
  <br>
  Wir wollen Euro Beträge umrechnen.
<br>
<br>
<form   name="Umrechnung">

EURO   <input type="text"  size="20"  name="Euro">
<br>
<p>
<input  type="button" value="Rechne um" onclick="Umrechnung()">
<p>
DM  <input type="text"  size="20"  name="DM">
DOLLAR  <input type="text"  size="20"  name="DOLLAR">
KRONEN <input type="text"  size="20"  name="KRONEN">

<br>

</form>
</center>
</body>
</html>

Und hier der Code für den Rechner der DM in Euro umrechnen soll und funkioniert:

<html>
<head><center>
<title>Umrechnung Euro - DM </title>
<script language="JavaScript">
function EuroUmrechnung(){



    var DMBetrag, EUROBetrag;

     DMBetrag = document.Umrechnung.DM.value;



    EUROBetrag = DMBetrag / 1.95583;

  document.Umrechnung.EURO.value=EUROBetrag;


}// Ende der Funktion
</script>
</center>
</head>

<body><center>
  <br>
  Wir wollen DM- Beträge in EURO umrechnen.
<br>
<br>
<form   name="Umrechnung">

DM   <input type="text"  size="10"  name="DM">

<br>
<p>
<input  type="button" value="Rechne um" onclick="EuroUmrechnung()">

<p>
EURO   <input type="text"  size="20"  name="EURO">

</form>
</center>
</body>
</html>

...zur Frage

JavaScript: Text nach Button-Klick in Textfeld?

Ich habe so eine Seite :

<li class="items">
    <p>some text 1</p>
    <div><button class="link" value="1">Wählen</a></div>
</li>
<li class="items">
    <p>some text 2</p>
    <div><button class="link" value="2">Wählen</a></div>
</li>
<li class="items">
    <p>some text 3</p>
    <div><button class="link" value="3">Wählen</a></div>
</li>



<form action="send" method="POST">
    <input type="text" name="text" id="text" required>
    <input type="number" name="zahl" id="zahl">
    <button type="submit" name="submit">Senden</button>
</form>

oben sind mehrere Texte mit je einem Button zum Auswählen (derzeit ohne funktion). Unten ist dann ein Formular und man kann selbst die Zahl des Textes dort eintragen.

Jetzt will ich das aber für leute vereinfachen und ermöglichen, dass man einfach auf den jeweiligen Button klickt und dann die Zahl (das value des Buttons) in das textfeld "number" eingetragen wird. Wie kann ich das mit javascript machen ? außerdem sollte der cursor direkt in das textfeld "text" gehen.

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

Input required?

Wie kann ich mit Javascript ein Input required machen, denn bei Html kann man es ja ändern bei untersuchen

...zur Frage

JavaScript: Ajax: Weiterleitung bei success?

ich habe ein normales HTML-form und ajax dahinter mit einer div wo text ausgegeben wird. bei Erfolg soll jetzt aber eine weiterleitung stattfinden, wie mach ich das ? einfach mit header in der php-datei geht ja nicht...

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen