Не передается значение по localstorage

Question

Есть скрипт который преобразовывает введенный в значение textarea текст, шифрует его и отображает в отдельном блоке(id="mixedtext") на этой же странице по нажатию кнопки button id="play".
При подключении функции для передачи значения из этого блока на другую страницу по localstorage передачи не происходит.
По отдельности, если ввести значение в блок #mixedtext - все срабатывает.
В отладчике - обращение к функции, которая отвечает за localstorage не происходит.
Я предположил, что возможно при клике, программа производит шифрование текста и одновременно обращается к #mixedtext (а там ничего еще пока нет) и поэтому не получается. И надо в таком случае поставить setTimeout? Или что-то я еще не до конца понимаю?
Как сделать, чтобы шифровалось и сразу же передавалось значение зашифрованного текста на другую страницу. Пытаюсь делать сайт по простому без серверного программирования, я еще новичок. Вот код.

Страница в которой происходит шифрование index.html:

<body>
        <textarea id="text" rows="20" cols="35"></textarea>
        <button id="play">GO</button>
        <div id="mixedtext"></div>
</body>

Страница куда нужно передать result.html:

<body>
        <div id="main" style="width:800px; height:400px; margin:auto; border:2px solid navy">
            <div id="left" style="width:400px; height:400px; background:yellow"></div>
        </div>
</body>

Файл скрипта:

window.addEventListener("DOMContentLoaded", init);

$(document).ready(function () {     // функция для передачи значения по localstorage

  $('#play').on('click', function () {      

    var value_one = document.getElementById('mixedtext').innerHTML; /*Берем значение из поля_1* .field_one*/
    var click_one = 1; /*Счетчик*/

    localStorage.setItem("value_ls", value_one); /*Заносим значение поля_1 в хранилище*/
    localStorage.setItem("value_click", click_one); /*Заносим значение счетчика в хранилище*/
    
    document.location.href = 'result.html'; /*переходим на страницу, где будем получать переданное значение*/

  });


  var value_two = localStorage.getItem("value_ls"); /*Получаем значение поля_1 из хранилища*/
  var click_two = localStorage.getItem("value_click"); /*Получаем значение счетчика из хранилища*/

  if (click_two == 1) { /*Проверяем значение счетчика. Если был клик, а значит, поле передалось не пустое, то...*/
    document.getElementById('left').innerHTML = value_two; /*Заносим значение поля_1* '.field_two'*//*.val(value_two)*/
    localStorage.removeItem("value_ls"); /*Удаляем контейнер, где хранилось значение поля_1*/
    localStorage.removeItem("value_click"); /*Удаляем контейнер, где хранилось значение счетчика*/
    localStorage.clear(); /*Очищаем хранилище*/
  } else {} /*...Если не было клика, то ничего не происходит*/

});

function buttonClick() {     // отсюда и ниже идет набор функций для шифрования введенного текста 
    let resultarr = [];
    let val = document.getElementById("text").value;
    let split = val.split('\n');  
    for ( let i=0; i<split.length; i++) {
        let stroka = '';
        wordsofstr = split[i].split(' '); //создаем массив слов из итой строки для подсчета, чтобы потом отнять их из Array
        getWords(split[i]);
        getNewArrMixwords(Array);
            for (let j=0; j<Newmixarr.length; j++) {
                stroka = stroka + Newmixarr[j] + ' ';
            }
        Array.splice(0,wordsofstr.length); // удаляем элементы предыдущей строки из Array
        Newmixarr.splice(0, wordsofstr.length);
        resultarr.push(stroka);
        //stor = stor + stroka + '<br>';
    }   
    let wholetext = '';
    for (let k = 0; k < resultarr.length; k++) {
        wholetext = wholetext + resultarr[k] + '<br>';
    }
    document.getElementById("mixedtext").innerHTML = wholetext;
    
}

function init() {
    let button = document.getElementById("play");
        button.addEventListener("click", function() {
            buttonClick();
        });
}
let Newmixarr = [];
            let Array = [];
            function mixWord(word) {
                let lastword = word;
                let wholenewmixword = '';
                for (let i=0; i<word.length; i++) {
                let letternum = Math.floor((word.length-i)*Math.random()); //find random letter
                    wholenewmixword = wholenewmixword + lastword[letternum];//concat random letters
                 lastword = lastword.slice(0,letternum) + lastword.slice(letternum + 1, word.length-i);//make new word without last letter
                    //word = lastword;
                }
                return wholenewmixword;
            }
            
            function getWords(str) {
                    str = str + ' ';
                    for (let i = 0; i<str.length; i++) {
                        if (str[i] !== String.fromCharCode(32) && ((str[i-1] == String.fromCharCode(32)) || (i == 0))){
                            for (let j=0; j<str.length; j++) {
                                    let nextspace;
                                    let word;
                                    if (str[j+i] == String.fromCharCode(32)) {
                                        nextspace = j+i;
                                        word = str.slice(i,nextspace);
                                        Array.push(word);
                                        break;
                                    }   
                            }
                        }   
                    }
                    return Array;
                }
            function getNewArrMixwords(mas){
                    for (let i=0; i<Array.length; i++) {
                    Newmixarr.push(mixWord(Array[i]));
                }
                    return Newmixarr;
            }
                    let finalarr =[];
            
            let str = "";
            function createString(){
                for (let i=0; i<finalarr.length; i++){
                str = str + finalarr[i] + " ";
                }
                return str;
            }
            function createString1(){
                for (let i=0; i<Newmixarr.length; i++){
                str = str + Newmixarr[i] + " ";
                }
                return str;
            }

Answer 1

Ваш buttonClick вызывается после обработчика $('#play').on('click', function () {.

Зачем Вы смешиваете jQuery и чистый JavaScript?

Answer 2

Нашел ошибку! Отладчик ругался, что я использую слово Array в чистом JS. Возможно в библиотеке jquery это название используется. поменял название на array1 и все заработало УРААА.

БЛОГ НА HUSL

Не передается значение по localstorage

Ответы (2 шт):