复选框没有获得文本区域的价值

Question

我需要创建 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();
    }
})

Answer 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">

复选框没有获得文本区域的价值

Checkboxes doesn`t get value of a textarea

javascript

module

function