I'm facing an unusual issue in my Vue function where it only seems to work after causing an error intentionally and then refreshing the page. The code itself works fine, but there's a problem with the initialization process. Can someone provide some assistance?
Here's a brief overview:
When the user clicks on the button, a function named provjeriOdgovore is triggered. This function searches for all elements with the class name answer (the input fields), and then iterates through them to check if the input value is included in the variable odgovori. If the value matches, the program adds the class green-color to the element's classList; if not, it adds red-color instead.
The problematic code section:
HTML snippet:
<input class="answer" type="text">
<input class="answer" type="text">
<input class="answer" type="text">
<button :onclick="provjeriOdgovore()">Provjeri</button>
Javascript snippet:
const odgovori = [[long array of strings], [long array of strings], [long array of strings]]
export default {
data() {
return {
provjeriOdgovore: () => {
let questionDiv = document.getElementsByClassName("answer")
for (let i = 0; i < questionDiv.length; i++) {
let userInput = questionDiv[i].value.toLowerCase();
questionDiv[i].classList.add("color-white")
if (odgovori[i].includes(userInput)) {
console.log("tocno", questionDiv[i])
questionDiv[i].classList.add("green-color");
if (questionDiv[i].classList.length > 2) {
questionDiv[i].classList.remove("red-color");
}
} else {
console.log("netocno" ,questionDiv[i])
questionDiv[i].classList.add("red-color");
if (questionDiv[i].classList.length > 2) {
questionDiv[i].classList.remove("green-color");
}
}
}
}
}
}
}