Пройти событие клика между двумя страницами localStorage

Я хочу сделать событие click с 2-й страницы. 1-я страница имеет ссылку для 2-й страницы, при нажатии кнопки кнопка добавляет строку HTML на 1-й странице. Я пытаюсь использовать localStorage для передачи данных. Мой код не работает, посмотрите ниже:

1st Page.html


HTML

<div id="content">
</div>

JS

var     output = document.getElementById('content');

addEvent(window, 'storage', function (event) {
  if (event.key == 'StorageName') {
    output.innerHTML = event.newValue;
  }
});

2nd Page.html

HTML

<input id="data" type="button" value="+" onclick="addRow()">

JS

addEvent(dataInput, 'keyup', function () {
localStorage.setItem('StorageName', this.value);
});

var dataInput = dataInput = document.getElementById('data');
object.onclick = function(){
addRow() {
var div = document.createElement('div');

div.className = 'row';

div.innerHTML = '<button>GO</button>';

document.getElementById('content').appendChild(div);
}
};

ОТВЕТЫ

Ответ 1

Вы не определили свою функцию addRow() правильно. Имя функции определяется ключевым словом function, а не внутри тела функции. Ваш код:

object.onclick = function(){
addRow() {
var div = document.createElement('div');

div.className = 'row';

div.innerHTML = '<button>GO</button>';

document.getElementById('content').appendChild(div);
}
};

Должно быть изменено на:

function addRow() {
    var div = document.createElement('div');

    div.className = 'row';

    div.innerHTML = '<button>GO</button>';

    document.getElementById('content').appendChild(div);
}
object.onclick = addRow;

Ответ 2

Я согласен с skyline3000 ответить addRow() должен быть определен. Также есть несколько других вещей, которые могут/должны измениться:

  • определить dataInput перед присоединением к нему события
  • object.onclick должен быть dataInput.onclick, поскольку этот элемент кликается. (есть событие click, что вы действительно хотите? Возможно, onkeyup?)
  • когда вы устанавливаете localStorage, который хотите установить определение функции, передаваемое на страницу 1, которая выглядит как addRow(). Просто удалите скобку, чтобы передать только определение. (Должно также быть определено перед использованием)
  • Если вы хотите просто передать эту функцию, вы не должны устанавливать событие onclick на странице 2. Что вы, вероятно, должны сделать, это записать, сколько раз вы хотите, чтобы он запускался, когда вы переходите на страницу.
  • Вам не нужно передавать функцию каждый раз, если она не меняется; Просто установите его один раз и запишите количество раз, когда оно было нажато.
  • стр. 1 можно поймать событие загрузки и проверить localStorage для определения функции и количества раз, когда она была запущена. Затем он может выполнять цикл и выполнять функцию.
  • код, который у вас есть, не добавляет ссылку на страницу 2, если это то, что вы ищете, но вы можете добавить это в функцию addrow, когда знаете имя файла и путь.

Page 1

var output = document.getElementById('content');

addEvent(window, 'load', function (event) {
  if (localStorage.getItem('StorageName') && localStorage.getItem('rowsToAdd')) {
    for(var i = 0; i > rowsToAdd;i++){
      var addNewRow = localStorage.getItem('StorageName');
      addNewRow();
     }
  }
});

Page 2

var dataInput = document.getElementById('data');

function addRow() {
    var div = document.createElement('div');

    div.className = 'row';

    div.innerHTML = '<button>GO</button>';

    document.getElementById('content').appendChild(div);

};
localStorage.setItem('StorageName', addRow);
dataInput.onclick = function() {
    if(localStorage.getItem('rowsToAdd')){
        localStorage.setItem('rowsToAdd', localStorage.getItem('rowsToAdd') + 1); 
    }else{
        localStorage.setItem('rowsToAdd',1);
    }
}

Я не тестировал этот код, поэтому он может не работать с копией + вставкой, а с чем-то довольно с надеждой.

Я также ответил на это с наилучшим пониманием того, что вы хотели, чтобы я мог справиться, но я не полностью вижу желаемый результат того, что вы, похоже, делаете.