[solved]<button onlick="call function">xxx</button> doesn't work

phn221181 · November 4, 2017

hey specialists,

i spent 2 days on a small java-calulating script for my 7 year old son, to "play on the tablet" :-). At the moment he is not allowed to play games, so he can practice math a little bit...

i don't use an app, because i like the "challange" and want to learn something too. thats why i startet to try coding. Now i cant go on, the check-button in my script doesn't do anything.

My script shows tasks an Operators, but the entered solution is not going to be compared with the result. Can someone help me to find the error?

Script in action is here: http://holland-nell.net/php/java-rechnen.html

the Code was written easily in "german". i translated the comments in english...

Thanks :-)

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=2.0">
<title>Titel</title>
<style>
  #box {
    width:400px;
  }

</style>
<script>
 
var min = 5, max = 10;  
var richtig = 0, falsch = 0;
  
function hilfe() {
  /* show result in  red */
  document.getElementById("erg-output").style.color = "red";
  /* Using Help Button is like a not solved task*/
  falsch++;
  document.getElementById("falsch").innerHTML = falsch;
  /* Reset Inputfield */
  document.ergebnis.ergebnis_eingabe.value ="";
  /* neue  Aufgabe nach 1,5 Sekunden */
  sleep(1500);
  aufgabe_erstellen(min,max);
  
}
  
function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}
  
function compare () {
  /* compare entered and calculated value */
  var erg_eingabe = (document.ergebnis.ergebnis_eingabe.value);
  var erg =(document.getElementById("erg-output").value);
  
  console.log('Ergebnis Eingabe: ' + erg_eingabe + ' berechnetes Ergebnis: ' + erg);
  
  if (erg == erg_eingabe) {
    alert("richtig");
    document.ergebnis.ergebnis_eingabe.value ="";
    richtig++;
    document.getElementById("richtig").innerHTML = richtig;
  } else {
    alert("falsch");
    falsch++;
    document.getElementById("falsch").innerHTML = falsch;
  }
  
}

function aufgabe_erstellen(min, max) {
  
  /* show result in white */ 
  document.getElementById("erg-output").style.color = "white";
  
  /* if input empty create new task */
  if(document.ergebnis.ergebnis_eingabe.value == '') {
   zahl1 = Math.floor(Math.random() * (max - min +1)) + min;
   zahl2 = Math.floor(Math.random() * (max - min +1)) + min;
   
   /* check which operation is activeted */
   var op ='';
   for (var i = 0; i < 4; i++) {
     if(document.operatoren.op[i].checked) {
       op = (document.operatoren.op[i].value);
       break;
     }
   }
  
   /* Create a String to show in div-element */
   var aufgabe = zahl1 + ' ' + op + ' ' + zahl2;
   eval(aufgabe);
   
   /* Calc results */
   switch (op) {
     case '+': var erg = zahl1 + zahl2;
       break;
     case '-': erg = zahl1 - zahl2;
       break;
     case '*': erg = zahl1 * zahl2;
       break;
     case '/': erg = zahl1 / zahl2;
       break;
     default:  erg = '';
   }
   
   /* Show task and result (in white) */
   document.getElementById("aufgabe").innerHTML = aufgabe + " = ";
   document.getElementById("erg-output").innerHTML = erg;
   
   /* if inputfield not empty call function "compare" */
  } else {
    compare();
  }
}    

</script>
</head>
<body>
<div id="box">
<div class="">
<form name="operatoren" onchange="aufgabe_erstellen(min,max)">
  <input type="radio" name="op" value="-">Minus</input>
  <input type="radio" name="op" value="+">Plus</input>
  <input type="radio" name="op" value="*">Multiplikation</input>
  <input type="radio" name="op" value="/">Division</input>
</form>
<div id="aufgabe"></div><div id="erg-output"></div>
</div>

<div class="">
<form name="ergebnis"> 
  <input type="number" name="ergebnis_eingabe" />
</form>
<button onklick="compare()">Check</button>
</div>

<div>
  <button onclick="hilfe()">Hilfe?</button><br>
  Richtig: <div id="richtig">0</div>
  Falsch: <div id="falsch">0</div>
</div>
</div>
</body>
</html>

Edited November 4, 2017 by phn221181

Ingolme · November 4, 2017

You misspelled onclick on this line

<button onklick="compare()">Check</button>

phn221181 · November 4, 2017

Thanks so much. How stupid =-). Now it works. Great. Something else to improve?

phn221181 · November 4, 2017

How do I set this topic to "solved"? 👌

Sign In

[solved]<button onlick="call function">xxx</button> doesn't work

Recommended Posts

phn221181

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

phn221181

Link to comment

Share on other sites

phn221181

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity