Флажки не получают значение текстовой области

Мне нужно создать 4 флажка, которые будут получать значение textarea и выполнять некоторые функции из модуля. Однако флажки не получают значения, и это моя проблема. Я пытался поместить text.addEventListener в каждую функцию, а также установить флажок для eventListeners, но это не сработало.

Надеюсь, вы могли бы дать мне какое-то решение. Заранее спасибо!

let text = document.querySelector('#text');

;(function() {

    let a = (text.value.split(' ').filter(elem => elem != ''));
    let b = a.join('').split('');

    function wordsNumber() {
        console.log(a);
        console.log('The number of words is ' + a.length + '!');
    }

    function symbolsNumber() {
        length = 0;
        for (let elem of a) {
            length += elem.length;
        }
        console.log('The number of symbols without backspace is ' + length + '!');
    }

    function symbolsNumberWithBackspace() {
        console.log('The number of symbols with backspace is ' + text.value.length + '!');
    }

    function counter() {
        let count = {};
        for (let elem of b) {
            if (count[elem] === undefined) {
                count[elem] = 1;
            }
            else {
                count[elem]++;
            }
        }
        for (let elem in count) {
            count[elem]=(Number(count[elem]/b.length)*100).toFixed(2) + '%';
        }
        console.log(count);
    }
    window.func = {wordsNumber, symbolsNumber, symbolsNumberWithBackspace, counter}
})();

let checkbox1 = document.querySelector('#check1');
let checkbox2 = document.querySelector('#check2');
let checkbox3 = document.querySelector('#check3');
let checkbox4 = document.querySelector('#check4');

checkbox1.addEventListener('click', function () {
    if (checkbox1.checked) {
        func.wordsNumber();
    }
})

checkbox2.addEventListener('click', function () {
    if (checkbox2.checked) {
        func.symbolsNumber();
    }
})

checkbox3.addEventListener('click', function () {
    if (checkbox3.checked) {
        func.symbolsNumberWithBackspace();
    }
})

checkbox4.addEventListener('click', function () {
    if (checkbox4.checked) {
        func.counter();
    }
})
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
0
18
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Решение состоит в том, чтобы обновить переменные a и b при вводе текста, например:

let text = document.querySelector('#text');

;(function() {

    let a, b;
    text.addEventListener('input', function () {
      a = (text.value.split(' ').filter(elem => elem != ''));
      b = a.join('').split('');
    });

    function wordsNumber() {
        console.log(a);
        console.log('The number of words is ' + a.length + '!');
    }

    function symbolsNumber() {
        length = 0;
        for (let elem of a) {
            length += elem.length;
        }
        console.log('The number of symbols without backspace is ' + length + '!');
    }

    function symbolsNumberWithBackspace() {
        console.log('The number of symbols with backspace is ' + text.value.length + '!');
    }

    function counter() {
        let count = {};
        for (let elem of b) {
            if (count[elem] === undefined) {
                count[elem] = 1;
            }
            else {
                count[elem]++;
            }
        }
        for (let elem in count) {
            count[elem]=(Number(count[elem]/b.length)*100).toFixed(2) + '%';
        }
        console.log(count);
    }
    window.func = {wordsNumber, symbolsNumber, symbolsNumberWithBackspace, counter}
})();

let checkbox1 = document.querySelector('#check1');
let checkbox2 = document.querySelector('#check2');
let checkbox3 = document.querySelector('#check3');
let checkbox4 = document.querySelector('#check4');

checkbox1.addEventListener('click', function () {
    if (checkbox1.checked) {
        func.wordsNumber();
    }
})

checkbox2.addEventListener('click', function () {
    if (checkbox2.checked) {
        func.symbolsNumber();
    }
})

checkbox3.addEventListener('click', function () {
    if (checkbox3.checked) {
        func.symbolsNumberWithBackspace();
    }
})

checkbox4.addEventListener('click', function () {
    if (checkbox4.checked) {
        func.counter();
    }
})
<textarea id="text"></textarea>
<input type="checkbox" id="check1">
<input type="checkbox" id="check2">
<input type="checkbox" id="check3">
<input type="checkbox" id="check4">

Другие вопросы по теме

Функция, которая переворачивает строку каждый раз, когда в ней появляется гласная?
Когда я запускаю свой файл python, обычная функция ничего не делает, ничего не выводится, как я могу отобразить функцию
Почему мой C++, максимизирующий попарный код продукта, не работает?
Я хочу прокручивать или указывать этот алфавит при нажатии в меню
Как создать собственный метод цепного фильтра с новой функцией
Как написать функцию, которая принимает список в качестве аргумента и возвращает сумму значений в списке?
Комбинаторика в Python numpy
Как установить аргумент функции в False, если пользователь не укажет иное?
Лучше всего отделять вычисления данных от форматирования данных в приложении Kotlin?
Найдите уникальные значения в столбце и объедините их в одну ячейку с помощью кода VBA (удаление пробелов в начале и в конце, чтобы избежать дублирования)