Necesito crear 4 casillas de verificación, que obtendrán el valor del área de texto y ejecutarán algunas funciones desde el módulo. Sin embargo, las casillas de verificación no obtienen el valor, y ese es mi problema. Intenté poner text.addEventListener en cada función y marcar eventListeners también, pero no funciona.
Espero que me puedan dar algún tipo de solución. ¡Gracias por adelantado!
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(); } })Una solución es actualizar las variables a y b en la entrada de texto, así:
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">