addEventListener funktioniert nicht
- Ersteller raexune
- Erstellt am
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();
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();
<!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>
<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
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
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
