Why is there a problem with the transfer of data through the global variable js? When I go to the page where I use the value of a variable (second.html), the following error occurs:

Uncaught TypeError: Cannot read property 'globalVar' of undefined

fi.js

function sent(){ window.storage = {}; window.storage.globalVar = document.getElementById('input').value; }

se.js

 var d = document; var name = window.storage.globalVar; function addRow() { var tbody = d.getElementById('table').getElementsByTagName('TBODY')[0]; var row = d.createElement("TR"); tbody.appendChild(row); var td1 = d.createElement("TD"); row.appendChild(td1); td1.innerHTML = name; }

first.html

 <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="se.js"></script> </head> <body> <form action="" method="post" onsubmit="sent();"> <input type="text" id="input"> <input type="submit" value="ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ"> </form> </body> </html>

second.html

 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="fi.js"></script> </head> <body onload="addRow();return false;"> <table id="table"> <thead> <tr> <th>Some</th> </tr> </thead> <tbody> </tbody> </table> </body>
  • before globalVar becomes global (and in general will be announced) you need to execute sent() - Misha Saidov
  • This global variable should appear in sent (). Those I need to leave empty sent (), and only after him write the assignment? @MishaSaidov - Pashok
  • Did not quite understand. In what sequence are these 2 scripts executed? - Misha Saidov
  • First, in fi.js we get the value from input and write it to a variable. Then in se.js we work with this data. @MishaSaidov - Pashok
  • one
    In any case, sent() should be executed before var name = window.storage.globalVar . If sent() is executed before addRow() , then perhaps the solution for you will be to place these 2 lines var d = document; var name = window.storage.globalVar; var d = document; var name = window.storage.globalVar; in addRow () (and perform addRow() after sent() once again) - Misha Saidov

1 answer 1

And so, first of all, js variables declared on one page will not be available on another, no matter how global they are. You can transfer a variable from one page to another in different ways, for example, via cookie , localStorage , get-запрос , etc. Since you have a form, better look towards get-запросов .

Secondly, try to hang events on elements from js. This option has several advantages, and most importantly, you do not lose control over the order of doing all this (well, you can attach several events at once).

Based on the above, your code should look something like this (I will not paint everything for you, but I will point out the way):

 function sent(e) { //Ρ‚ΠΈΠΏΠ° Ρ‚Π°ΠΊ localStorage.setItem('globalVar', document.getElementById('input').value); //ΠΈΠ»ΠΈ Ρ‚Π°ΠΊ document.cookie = "globalVar=" + document.getElementById('input').value; //ΠΈΠ»ΠΈ Ρ‚Π°ΠΊ //Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΡΡ‚Ρ‹Π»ΡŒΠ½ΠΎ, ΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ Π±Π΅Π· js Π΄Π°ΠΆΠ΅, ΡƒΠΊΠ°Π·Π°Π² action="second.html" e.preventDefault(); window.location.href = "/second.html" + "?" + "globalVar=" + document.getElementById('input').value; }

Now it is necessary to read

 function addRow() { //Ρ‡ΠΈΡ‚Π°Π΅ΠΌ ΠΈΠ· ls var name = localStorage.globalVar; //Ρ‡ΠΈΡ‚Π°Π΅ΠΌ ΠΈΠ· ΠΊΡƒΠΊΠΈ (Π»ΡƒΡ‡ΡˆΠ΅ Π½Π°ΠΉΡ‚ΠΈ Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с кукисами var name = document.cookie.replace(/globalVar=/g, ""); //Ρ‚Π°ΠΊ Π»ΡƒΡ‡ΡˆΠ΅ Π½Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ //Ρ‡ΠΈΡ‚Π°Π΅ΠΌ ΠΈΠ· get var name = window.location.search.replace('?', '').replace(/globalVar=/g, ""); //Π½Ρƒ ΠΈ Ρ‚.Π΄. var d = document; var tbody = d.getElementById('table').getElementsByTagName('TBODY')[0]; var row = d.createElement("TR"); tbody.appendChild(row); var td1 = d.createElement("TD"); row.appendChild(td1); td1.innerHTML = name; }

What I wrote needs serious refinement. These are just tips to understand how this problem is solved at all.