My english teacher asked me to make some sort of program to help my classmates learn the past tense of irregular verbs. I haven't used javascript in some time, so I copied most of the code from my older projects, but for some reason it doesn't work anymore. Clicking buttons does not alert anything and the text on the page does not change either. I have no idea why it doesn't work.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #aaaaff;
}
h6 {
color: #aaaa00;
}
#out {
color: red;
}
#verb {
color: green;
}
</style>
<script type="text/javascript">
const verbs = [
["be", "was", "been", "быть"],
["beat", "beat", "beaten", "бить"]
]; // todo add more verbs
const txt0 = document.getElementById("verb");
const txt1 = document.getElementById("verb1");
const txt2 = document.getElementById("verb2");
const txt3 = document.getElementById("verb3");
const txt4 = document.getElementById("out");
const btn1 = document.getElementById("check");
const btn2 = document.getElementById("answer");
const btn3 = document.getElementById("next");
var verb = verbs[Math.floor(Math.random() * verbs.length)];
if (typeof String.prototype.trim === "undefined") {
String.prototype.trim = function () {
return String(this).replace(/^\s+|\s+$/g, "");
};
}
alert(verb);
var score = 0;
txt0.innerText = "Verb: " + verb[3];
btn1.addEventListener("click", () => {
alert(1);
a1 = txt1.value;
a2 = txt2.value;
a3 = txt3.value;
if (
a1.trim() == verb[0] &&
a2.trim() == verb[1] &&
a3.trim() == verb[2]
) {
txt4.innerText = "Correct!";
}
});
btn2.addEventListener("click", () => {
alert(2);
score--;
txt1.value = verb[0];
txt2.value = verb[1];
txt3.value = verb[2];
});
btn3.addEventListener("click", () => {
alert(3);
txt1.value;
txt2.value;
txt3.value;
txt4.innerText = "Learn three forms of verbs!";
if (
!(
a1.trim() == verb[0] &&
a2.trim() == verb[1] &&
a3.trim() == verb[2]
)
) {
score--;
document.getElementById("score").innerText = "Score: " + score;
}
var verb = verbs[Math.floor(Math.random() * verbs.length)];
});
</script>
</head>
<body>
<h1 id="verb">Verb:</h1>
<form>
<input type="button" value="Check" id="check" />
<input type="button" value="Show answer" id="answer" />
<input type="button" value="Next" id="next" /><br /><br />
<input type="text" id="verb1" name="verb1" />
<input type="text" id="verb2" name="verb2" />
<input type="text" id="verb3" name="verb3" />
</form>
<h1 id="out">Learn three forms of verbs!</h1>
<h1 id="score">Score: 0</h1>
</body>
</html>