Linking the answer-block with the Counter?

Question

I want to create a priming task for which I need a “word count.” The counter is displayed graphically, but it doesn't count. Maybe it's not linked correctly to the input field?

This is the preview: https://www.soscisurvey.de/tutorial500491/?s2preview=LB8A1c0vSNjRbaZNw0ThHxCpmPIAjIHu&question=Q015&csfr&pvSelf&r=NTUX/

Thats the current code:

0

Words

0

Characters

#Q015_counter.count{ background-color:#0547ad; box-sizing:border-box; padding:7px; display:flex; justify-content:space-around; text-align:center; border-radius:5px; width:100%; font-family:sans-serif; margin-top:10px; } #Q015_counter p{ color:#ceced7; margin:0; } #Q015_counter h5{ color:#fff; font-size:22px; margin:0; }

SoSciTools.ready(function () {
var input = document.getElementById("Q015_01");
var wc = document.getElementById("Q015_word-count");
var cc = document.getElementById("Q015_char-count");
if (!input || !wc || !cc) return;

function updateCounts() {

var v = input.value || "";
cc.textContent = v.length;
var m = v.trim().match(/\S+/g);
wc.textContent = m ? m.length : 0;

}

["input","keyup","change","paste"].forEach(function(evt){

input.addEventListener(evt, updateCounts);

});
updateCounts();
});