addEventListener funktioniert nicht

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

raexune

Neues Mitglied
1 Oktober 2021
4
0
1
33
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();
}
});
 

basti1012

Senior HTML'ler
26 November 2017
1.678
177
63
Minden
basti1012.de
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
 

raexune

Neues Mitglied
1 Oktober 2021
4
0
1
33
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();
 

raexune

Neues Mitglied
1 Oktober 2021
4
0
1
33
<!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>
 

basti1012

Senior HTML'ler
26 November 2017
1.678
177
63
Minden
basti1012.de
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
 

raexune

Neues Mitglied
1 Oktober 2021
4
0
1
33
Vielen Dank, ich hab das einfach nicht gesehen. Ich denk manchmal zu kompliziert.

Danke für die Tipps