0

Почему возникает проблема с передачей данных через глобальную переменную js? Когда перехожу на страницу, где использую значение переменной(second.html), возникает такая ошибка:

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>
6
  • прежде чем globalVar станет глобальной (и вообще будет объявлена) нужно выполнить sent() 1 дек 2018 в 9:01
  • У меня в sent() как раз и должна появляться эта глобальная переменная. Те мне надо оставить пустой sent(), а только после него написать присвоение? @MishaSaidov
    – Pashok
    1 дек 2018 в 9:04
  • Немного не понял. В какой последовательности выполняются эти 2 скрипта? 1 дек 2018 в 9:06
  • Сперва в fi.js мы получаем значение из input и записываем в переменную. Затем в se.js мы с этими данными работаем. @MishaSaidov
    – Pashok
    1 дек 2018 в 9:07
  • 1
    В любом случае sent() должен выполниться раньше, чем var name = window.storage.globalVar. Если sent() выполняется раньше, чем addRow(), то возможно решением для вас будет поместить эти 2 строки var d = document; var name = window.storage.globalVar; в addRow() (и выполнять addRow() после sent() еще раз повторюсь) 1 дек 2018 в 9:13

1 ответ 1

0

И так, в первую очередь, js переменные, объявленные на одной странице не будут доступны на другой, какими бы глобальными они не были. Передать переменную с одной страницы на другую можно по разному, например через cookie, localStorage, get-запрос и др. Так как у вас имеется форма, лучше посмотрите в сторону get-запросов.

Во вторых, старайтесь навешивать события на элементы из js. У такого варианта есть несколько преимуществ, а главное вы не теряете контроль над порядком выполнения всего этого (ну и можете несколько событий навешать сразу).

На основе всего вышесказанного ваш код должен выглядеть примерно так (я не буду расписывать все за вас, но путь укажу):

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;
}

Теперь это надо прочитать

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;
}

То, что я написал нуждается в серьезной доработке. Это всего лишь подсказки, чтобы понимать как вообще данная проблема решается.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.