Мне нужно создать 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();
}
})
Решение состоит в том, чтобы обновить переменные 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">