• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

addEventListener funktioniert nicht

raexune

Neues Mitglied
Ich finde hier keinen Fehler. Beim Klick tut sich aber nix. Was kann das sein?

option1.addEventListener('click', function(){
if(option1.innerHTML == answer){
genarate_equation();
}
else{
audio.onplay();
}
});
 
Werbung:
Könntest du mal den ganzen Code zeigen?
Gerade das was in option1 und answer steht , bzw. wo das weg kommt.
Das answer ist kein String , denke mal das du das aber abfragen möchtest , richtig ?
Mach mal so "answer" dann geht das vieleicht auch
 
const option1 = document.getElementById("option1");
const option2 = document.getElementById("option2");
const option3 = document.getElementById("option3");
const audio = document.getElementById("myAudio");
var answer = 0;
function generate_equation(){
var num1 = Math.floor(Math.random() *13);
var num2 = Math.floor(Math.random() *13);
var dummyAnswer1 = Math.floor(Math.random() *13);
var dummyAnswer2 = Math.floor(Math.random() *13);
var allAnswers = [];
var switchAnswers = [];
answer = num1 + num2;
document.getElementById("num1").innerHTML = num1;
document.getElementById("num2").innerHTML = num2;
option1.innerHTML = answer;
option2.innerHTML = dummyAnswer1;
option3.innerHTML = dummyAnswer2;
}
option1.addEventListener('click', function(){
if(option1.innerHTML == answer){
genarate_equation();
}
else{
audio.onplay();
}
});
option2.addEventListener('click', function(){
if(option2.innerHTML == answer){
genarate_equation();
}
else{
audio.onplay();
}
});
option3.addEventListener('click', function(){
if(option3.innerHTML == answer){
genarate_equation();
}
else{
audio.onplay();
}
});
generate_equation();
 
Werbung:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
<title>Maths for kids</title>
</head>
<body>
<audio id="myAudio">
<source src="audio/wrong.mp3">
</audio>
<header>
<div class="container">
<h1>MATH FOR KIDS</h1>
<ul>
<li id="current"><a href="index.html">Add</a></li>
<li><a href="substract.html">Substract</a></li>
<li><a href="multiply.html">Multiply</a></li>
<li><a href="divide.html">Divide</a></li>
</ul>
</div>
</header>
<div class="wrapper">
<div class="equation">
<h1 id="num1" style="color: #fe4a49;">1</h1>
<h1 style="color: #2ab7ca;">+</h1>
<h1 id="num2" style="color: #fed766;">1</h1>
<h1 style="color: #fe4a49;">=</h1>
<h1 style="color: grey;">?</h1>
</div>
<div class="answer-options">
<h1 id="option1">1</h1>
<h1 id="option2">2</h1>
<h1 id="option3">3</h1>
</div>
</div>
<script src="scripts/add.js"></script>
</body>
</html>
 
Du musst das aber alles etwas anders aufbauen.
Dein Hauptproblem ist das immer Antwort 1 die richtige ist.

Deine click Events kann man auch in einen Zusammen bauen usw…
Und IDs und
Variablen sollten nicht den gleichen Namen haben.

Inline Style sollte man nicht mehr machen, dafür gibt es die CSS Datei oder notfalls das <style> Element
 
Werbung:
Zurück
Oben