☰

» »

[hTML, JS], komunikacija med elementi

[hTML, JS], komunikacija med elementi

japol ::

Kako se izvede prenašanje med stranmi in funcijami v html oz. JS? Primer: html1.html ima gumb za izračun ki izvede funkcijo iz ločene JS datoteke (Izracun.js, Sestej()), html2.html ima input text z id=t2, html3.html ima input text z id=t3. Funkcija Sestej() mora sešteti t2+t3. Kako ko pa sta vsak na svoji strani, pa strani nista odprti v browserju. Ali pa kako če html1 ima iframe in znotraj njega se opira html2 in html3?
  • spremenil: japol ()

Ales ::

Za JS poglej: MDN, Using the Fetch API.

bemfa ::

Moraš jih nekam shranit. Lahko na strežniku (rabiš backend z bazo) ali pa v browserju (local storage, ...).

Blinder ::

Sem moral malo premislit preden odpisat. Ko naložiš drugo html datoteko v browserju, se ti vsebina prejšnje strani (spremenljivke) zbriše. Zato ta tvoj kalkulator ne bo deloval. Odgovor Alesa je čisto zgrešen, mogoče te je namerno želel sabotirat. Backend strežnik je too much za takšno malenkost, kot je kalkulatorček. Local storage pa bi deloval (če ne deluje, poskusi s session storage ali cookieji).
Je pa design tega tvojega kalkulatorčka že v štartu sfaljen, ker je porazdeljen na več strani (html datotek). Moralo bi vse bit narejeno na eni strani.
99.991% of over-25 population has tried kissing.
If you're one of the 0.009% who hasn't, copy & paste this in your Signature.
Intel i3-12100f gtx 3050 Pismo smo stari v bozjo mater. Recesija generacija

135063 ::

z js parametre v url (ali form method=get) ali v cookie?

japol ::

Prosim za osnovni primer. Poskušam z 
function calculate5() {
  var input2 = parseFloat(JSON.parse(localStorage.getItem("input2")));
  var input3 = parseFloat(JSON.parse(localStorage.getItem("input3")));
  if (isNaN(input2) || isNaN(input3)) {
    alert("Please enter valid numbers in both input fields.");
  } else {
    var sum = input2 + input3;
    alert("The sum is " + sum);
  }
}

pa vrača input2 in 3 je NaN

Blinder ::

V konzolci od developer tools napisi "localStorage", pa poglej, kaj imas notri.

Mislim notri nimas nicesar. Spremljaj, ce se ti localStorage resetira medtem, ko gres na kaksno drugo stran.
99.991% of over-25 population has tried kissing.
If you're one of the 0.009% who hasn't, copy & paste this in your Signature.
Intel i3-12100f gtx 3050 Pismo smo stari v bozjo mater. Recesija generacija

Zgodovina sprememb…

  • spremenil: Blinder ()

bemfa ::

V html2 in html3 moraš dodat onChange na input, ki shrani vrednost inputa v localstorage.

japol ::

en izmed, html2:
<script>
var input2;
document.getElementById("input2").addEventListener("change", function() {
  input2 = document.getElementById("input2").value;
  localStorage.setItem("input2", JSON.stringify(input2));
});
</script>

console.log in debuger prikazujeta "null", starage (local storage) pa prikazuje prave value, tudi če dodam kontrola ali je vnos število, potrdi da je.
vse tri html so istočasno odprti v browserju.

Blinder ::

Vsak html ima svoj tekoči javascript. In eden od njih ne ve za obstoj drugih. Ločeni so.
Če ti local storage prikazuje pravilno, potem bi moralo delat.
99.991% of over-25 population has tried kissing.
If you're one of the 0.009% who hasn't, copy & paste this in your Signature.
Intel i3-12100f gtx 3050 Pismo smo stari v bozjo mater. Recesija generacija

japol ::

Prosim za nek osnovni primer, ker nekaj manjka...:
Prvi html:
<button id="sumButton">Sum Values</button>
    <script>
      const button = document.getElementById("sumButton");
      button.addEventListener("click", () => {
        const value1 = localStorage.getItem("value1");
        const value2 = localStorage.getItem("value2");
        const sum = parseInt(value1) + parseInt(value2);
        alert("The sum of " + value1 + " and " + value2 + " is " + sum);
      });
    </script>

drugi html:
 <input type="text" id="input1" placeholder="Enter value 1">
    <script>
      const input1 = document.getElementById("input1");
      input1.addEventListener("input1", () => {
        localStorage.setItem("value1", input1.value);
      });
    </script>

tretji html:
 <input type="text" id="input2" placeholder="Enter value 2">
    <script>
      const input2 = document.getElementById("input2");
      input2.addEventListener("input2", () => {
        localStorage.setItem("value2", input2.value);
      });
    </script>

Kaj manjka? V storage so vrednosti iz inputa prave, a v debugerju pa null, sum pa NaN
podobno če je npr. 
<script>
var input3;
document.getElementById("input3").addEventListener("change", function() {
  input3 = document.getElementById("input3").value;
  localStorage.setItem("input3", JSON.stringify(input3));
});
</script>

Zgodovina sprememb…

  • spremenil: japol ()

kljuka13 ::

V tvoji kodi je napaka v dveh vrsticah, kjer na vnosna polja dodajaš dogodke. Dodal si namreč dogodka "input1" in "input2", ki ne obstajata in se nikoli ne sprožita. Dodati moraš dogodek "change", ki se bo sprožil, ko se vsebina polja spremeni. Torej:

input1.addEventListener("change", ...);

input2.addEventListener("change", ...);

Blinder ::

Good catch.
Jupol, uporabi kak popularen text editor, se mi zdi, da bi ti to napako moral že text editor pokazat
99.991% of over-25 population has tried kissing.
If you're one of the 0.009% who hasn't, copy & paste this in your Signature.
Intel i3-12100f gtx 3050 Pismo smo stari v bozjo mater. Recesija generacija

japol ::

Uporabljam notepad++
a tako? 
<script>
var input2 = document.getElementById("input2");
  input2.addEventListener("change", function() 
  {
    var value = input2.value;
    localStorage.setItem("input2", JSON.stringify(value));
  });
};
</script>

Blinder ::

Zgleda uredu.

Mah niti Sublime text niti VS Code mi ne javijo, da je z input1 nekaj narobe.
99.991% of over-25 population has tried kissing.
If you're one of the 0.009% who hasn't, copy & paste this in your Signature.
Intel i3-12100f gtx 3050 Pismo smo stari v bozjo mater. Recesija generacija

bemfa ::

Nasvet za debugiranje: v event funkcijo si dodaš console.log("input 1 cange event triggered") in potem ob testiranju v brskalniku takoj vidiš če se je event sprožil ali si kaj narobe nastavil.

japol ::

Izgleda ok, vendar ne deluje pravilno, NULL oz. NaN dobim vrednosti. Imam dodano kodo: 
console.log(localStorage.getItem("input1"));
console.log(localStorage.getItem("input2"));
console.log(input1);
console.log(input2);

da preverjam kaj je z vrednostmi pa so NULL. Nekako ne dobi iz local storage vrednosti....

Blinder ::

Glej ki različni tabi v browserju .. verjetno si ne delijo enakega localStorage. Preveri

veerjetno si ne delijo istega
99.991% of over-25 population has tried kissing.
If you're one of the 0.009% who hasn't, copy & paste this in your Signature.
Intel i3-12100f gtx 3050 Pismo smo stari v bozjo mater. Recesija generacija

Zgodovina sprememb…

  • spremenil: Blinder ()

135063 ::

isti host?

kuall ::

saj op sam ne ve kaj bi rad.
ampak malo guglanja in chatgpt in je rešitev spodaj. se pa uporablja webservise za take stvari ponavad.



use this: https://developer.mozilla.org/en-US/doc... to write me two html pages that communicate with each other,
ChatGPT
Certainly! You can use the Broadcast Channel API to create two HTML pages that communicate with each other. The Broadcast Channel API allows you to send and receive messages between different windows or tabs in the same browser. Here are two HTML pages that demonstrate this communication:

Page 1 (sender.html):
html
Copy code
<!DOCTYPE html>
<html>
<head>
    <title>Sender Page</title>
</head>
<body>
    <h1>Sender Page</h1>
    <button id="sendMessage">Send Message to Receiver</button>

    <script>
        // Create a Broadcast Channel with a specific name
        const channel = new BroadcastChannel('myChannel');

        document.getElementById('sendMessage').addEventListener('click', () => {
            // Send a message to the channel
            channel.postMessage('Hello from Sender!');
        });
    </script>
</body>
</html>
Page 2 (receiver.html):

html
Copy code
<!DOCTYPE html>
<html>
<head>
    <title>Receiver Page</title>
</head>
<body>
    <h1>Receiver Page</h1>
    <p id="receivedMessage"></p>

    <script>
        // Create a Broadcast Channel with the same name as the sender
        const channel = new BroadcastChannel('myChannel');

        // Listen for messages on the channel
        channel.addEventListener('message', event => {
            const receivedMessage = event.data;
            document.getElementById('receivedMessage').textContent = 'Received: ' + receivedMessage;
        });
    </script>
</body>
</html>

In this example, we have two HTML pages: sender.html and receiver.html. The sender page creates a Broadcast Channel named "myChannel" and sends a message when the button is clicked. The receiver page also creates a Broadcast Channel with the same name and listens for messages on that channel. When a message is received, it updates the content on the page.

You can open both of these HTML pages in different browser tabs or windows, and when you click the "Send Message to Receiver" button on the sender page, the receiver page will display the received message. This demonstrates communication between two HTML pages using the Broadcast Channel API.

Phantomeye ::

Če še enkrat omeniš iframe, jih dobiš po prstih :D. Nismo več v 1997, da boš na tak način "vključeval" vsebino.

Sploh ne vem, zakaj ta shit sploh še obstaja. Mislim, za ene zadeve štekam, ampak za večino pa pojma nimam ZAKAAJ.

Zgodovina sprememb…

japol ::

Vsak page ustvari svoj local storage, ai pravi da je local za vse ena (localy within browser, vrednosti obstanejo celo kljub zaprtju browserja, shared between windows of same origin, če je isti domain, protocol, and port mora delovati,...). Vidim da se ustvari pri vsaki strani ločeno. Kako to rešiti? Opcije (cache storage, session storage, cookies,...?
Kaj pa uporabiti (kot iframe) če je potreba da se page odpre znotraj page-a?

Blinder ::

Lahko poskusiš localStorage nadomestiti s cookieji.
V osnovi pa imaš fail od designa, ker imaš tri ločene strani. Bolj logično bi imet to tvojo vsebino iz treh straneh vso na eni in isti strani. Pa če želiš potem prikazovat ali skrivat vsebino lahko naprimer carousel. Primer carousela z bootstrapom: https://getbootstrap.com/docs/5.3/compo...
99.991% of over-25 population has tried kissing.
If you're one of the 0.009% who hasn't, copy & paste this in your Signature.
Intel i3-12100f gtx 3050 Pismo smo stari v bozjo mater. Recesija generacija

Phantomeye ::

Blinder je izjavil:

Lahko poskusiš localStorage nadomestiti s cookieji.
V osnovi pa imaš fail od designa, ker imaš tri ločene strani. Bolj logično bi imet to tvojo vsebino iz treh straneh vso na eni in isti strani. Pa če želiš potem prikazovat ali skrivat vsebino lahko naprimer carousel. Primer carousela z bootstrapom: https://getbootstrap.com/docs/5.3/compo...


jst ne vem zakaj ima OP željo programirat kot da smo leta 2000.

Drugače je pa eden od načinov, kako "poklicat" vsebino iz enega page-a v drugega:
neki tazga (namesto iframe-a):

fetch('navigacija.html')
  .then(response => response.text())
  .then(data => {
    document.getElementById('navElement').innerHTML = data;
  });

Blinder ::

Hudo, nisem poznal tega
99.991% of over-25 population has tried kissing.
If you're one of the 0.009% who hasn't, copy & paste this in your Signature.
Intel i3-12100f gtx 3050 Pismo smo stari v bozjo mater. Recesija generacija

Ales ::

Blinder je izjavil:

Hudo, nisem poznal tega

V prvem odgovoru v tej temi sem dal link na fetch API, pa si napisal, da morda hočem s tem "sabotirat" @japol. :))

Blinder ::

Vem ja, ker fetch se ponavadi uporablja za druge stvari.
Bo pa verjetno moral imet vse tri strani odprte, da bo fetch deloval med njimi?
99.991% of over-25 population has tried kissing.
If you're one of the 0.009% who hasn't, copy & paste this in your Signature.
Intel i3-12100f gtx 3050 Pismo smo stari v bozjo mater. Recesija generacija

Phantomeye ::

Blinder je izjavil:

Vem ja, ker fetch se ponavadi uporablja za druge stvari.
Bo pa verjetno moral imet vse tri strani odprte, da bo fetch deloval med njimi?


Jst sm z uporabo fetch iz enega produkta pobral navigacijo in jo v ključil v en drug (third party) produkt na isti domeni, ker programerji niso želeli posegati v kodo (zaradi updejtov) - sem želel povezana produkta poenotit vizualno. Pač ni najboljša rešitev, ampak it works.

Tko da ne rabi nič met odprto, razen strani, kjer hoče prikazat vsebino (da se se javascript, s potjo do fajlov index2 in index3 sproži).

kuall ::

če narediš fetch se ti javascript nič ne proži, ga moraš ročno sprožit.
najbrž op sploh nima webserverja ampak odpira 2 html fajla na kišti in seveda pol ni ista domena in kuki ne dela.

bemfa ::

Kaj pišete če nimate pojma??? Z fetch sicer lahko dobiš drug page, ne moreš pa dobit podatkov, ki jih je user vnesel v input na neki drugi strani.
Drugače ta fetch ni čist nič druga kot malo lepše implementiran AJAX GET request, normalno uporaben za API-je, tukaj 'zlorabljen' za branje HTML-ja.

Phantomeye ::

kuall je izjavil:

če narediš fetch se ti javascript nič ne proži, ga moraš ročno sprožit.
najbrž op sploh nima webserverja ampak odpira 2 html fajla na kišti in seveda pol ni ista domena in kuki ne dela.


Če misliš ročno proženje v smislu, da moraš obiskat spletno stran, ki ima javascript - pol ja, moraš "ročno" prožit.

Sploh pa za fetch ne rabiš webserverja.

bemfa je izjavil:

Kaj pišete če nimate pojma??? Z fetch sicer lahko dobiš drug page, ne moreš pa dobit podatkov, ki jih je user vnesel v input na neki drugi strani.
Drugače ta fetch ni čist nič druga kot malo lepše implementiran AJAX GET request, normalno uporaben za API-je, tukaj 'zlorabljen' za branje HTML-ja.


Mogoče preberi o čem teče debata? OP je želel poklicati navigacijo iz enega htmla fajla v drugega z uporabo iframe-a. Fetch je bil predstavljen kot alternativa.

Zgodovina sprememb…

japol ::

Vodilna stran ima na delu prostor (npr. iframe) kjer se morajo prikazovati druge strani. Kot npr. tabpages ali podobno (mora web page znotraj glavnega prikazovati). Vse pa mora med sabo komunicirati. Ko odpre novo stran v iframe se morajo podatki nekje shraniti za nek izračun, podobno se ponovi še za več strani. Za potrebe izračuna je potreben dostop do vseh teh podatkov od vseh strani.
Če obstajajo boljše možnosti, jih podajte.

Ales ::

Narobe se sploh lotevaš problema.

Nehaj opisovati, da bi rad da se strani odpirajo ena v drugi in podobno, temveč na čim bolj preprost način opiši, kaj bi rad dosegel z vidika podatkov.

Katere točno podatke bi rad obdeloval? Kaj je začetno stanje podatkov in kaj bi ti rad, da je končno?

Edit: še enkrat uporabi besedo "iframe" pa pokličem moderatorja da zaklene temo in te za teden dni bana s foruma. :))

Zgodovina sprememb…

  • spremenil: Ales ()

kr?en ::

iframe-i so dead ze dolg cajta.

Vrzi vse kar si naredu v kos in najprej napis kaj bi sploh naredu pa mal poglej kako sploh zgleda moderen development spletnih strani.

HotBurek ::

Ne, iFrame-ji so kul. Z njihovo uporabo imaš možnost da pokažeš in dokažeš, ali si res pravi moški ali ne.
root@debian:/# iptraf-ng
fatal: This program requires a screen size of at least 80 columns by 24 lines
Please resize your window

japol ::

Ne vem več kako naj še predstavim, mogoče edino še tako:
izgled1

izgled1

kuall ::

Kaj ko bi se lotil cesa bolj zanivimga kot ta 100x prezvecen bullshit. Jaz bi zase rad 2 appa pa ni casa, na sihtu delo leti z vseh strani.

1. Program ki gleda ves web trafic in shrani vse slike nad100kb v mapo

2. App za fon ki poslusa tvojo muzko in ko slisis dober del mu reces shrani ta del.pa ti naredi mix best delov. tiktok za muzko.

Ni vazno ce si
TotL nub, lotis se pa gre. Pa da ne bi prsu na ta shit forum sprasevat da ti ne gre.

japol ::

Ta slika je le za predstavo, drugače pa naročnik je plačnik... škoda debate-UI mora biti predpotopen, itd. sploh ne gremo v te vode - ne da se mi več... Podatki se vpisujejo v ločenih straneh in morajo biti na voljo za končen izračun na čisto tretji x strani.
Ti pa kar v akcijo pa spiši. Ne se zgovarjat... Objavi kako sliko izdelanega.

bemfa ::

Daj kontakt od naročnika, mu bomo rešili vse probleme. On bo dobil boljšega programerja, ti se pa boš znebil tečnega naročnika. Pol pa lahko programiraš za kualla :D On tolko služi, da bo še tebi biznis zrihtal.

kljuka13 ::

@japol, če se vrnem k tvojemu izvirnemu problemu: Sklepam, da je zelo verjetno problem v tem, da imaš ti datoteke html shranjene na svojem računalniku in jih nato lokalno odpiraš v brskalniku, torej je v URL-vrstici zapisano file:///. To je problem - v tem primeru zares vsaka stran ustvari svoj localStorage, zato ker jih brskalnik v takih primerih obravnava, kot da bi prihajale iz ločenih virov ("origin").

Če boš te datoteke naložil na spletni strežnik (ki si ga lahko enostavno postaviš tudi kar na svojem računalniku) in boš nato dostopal do njih v brskalniku (npr. http://localhost/prvi.html), bi tvoja koda morala delovati, saj bo brskalnik prepoznal, da vse tri strani prihajajo iz istega vira in si bodo zato delile isti localStorage :)

kuall ::

kljuka: to sem mu že jaz povedal pa me ne posluša
bemfa: meni leti plačljivo delo iz leve in desne, pač dobrim programerjem dela ne zmanjka. ti moraš po šit forumu prosit za delo, ker si zanič. bosta z opom skupaj rešila tale problem za 5€ na h.

bemfa ::

Če si ti definicija dobrega programerja, potem grem rajši jarke kopat.

kuall ::

dovolj dober, da mi leti delo z leve in desne.
za vas slo šit hijene sem slab. ste pač zabite hijene.

bemfa ::

Pazi da ti ne bo letelo z leve in desne okrog kepe...

kuall ::

a se boste hijene zbrale in me preteple :))

Lion29 ::

lol

podatkje iz ene strani (prek API) shranis v bazo
podatke iz druge strani (prek API) shranis v bazo
ko odpres stran, kjer izracuna whatever... poklices server prek API, ki pobere rezultate prvih iz baze - naredi izracun - in vrne rezultat

to je simple arhitektura..
vedno uporabljas nek (zuannji) centralni sistem (API), ki povezuje vse

zdaj,lahko to uporabis prek restful API in normalnimi http klici (fetch/axios) GET/POST - v vecini primerov

lahko pa uporabis websocket standard, ce mora to biti res real time in je komunikacija bolj obojesmerna

v tvojem primeru izgleda da sstrani 1 in 2 posljejo podatke (iz forme) in stran 3 dobi podatke in prikaze ... torej 2x POST in 1x GET ... normalen restful API
Founder and CTO @ Article-Factory.ai

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Jquery

Oddelek: Izdelava spletišč		151811 (1535) mk818764
»

Potrebujem javascript pomoč

Oddelek: Programiranje		81216 (966) no1pheeew
»

[PHP/JavaScript] tic tac toe

Oddelek: Programiranje		171688 (1421) illion
»

js generiran input hidden noče biti POSTan z php

Oddelek: Izdelava spletišč		51817 (1734) Buffy
»

Internet strani kot slideshow

Oddelek: Izdelava spletišč		212112 (1863) sverde21

Več podobnih tem