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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...