Jump to content
Sign in to follow this  
phn221181

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

Recommended Posts

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 by phn221181

Share this post


Link to post
Share on other sites

You misspelled onclick on this line

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

  • Thanks 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×