Buttons verschwinden nach Aufruf von onclick...

Js_new · 05. Feb. 2016

Hallo,

ich bin im Momenent dabei JS zu lernen. Die wohl beste Methode = learning by doing :d

Ich versuche ein kleines Rechenspiel mit zufälligen Zahlen und 4 Antwortbutton zu erstellen.

Hier mal mein bisheriger Code

HTML:

<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
      <script>FrageAendern();</script>  
  <br /> 
   
  <input type="button" id="1" value="" onclick="klicken(this.value)">
  <input type="button" id="2" value="" onclick="klicken(this.value)"><br/>
  <input type="button" id="3" value="" onclick="klicken(this.value)">
  <input type="button" id="4" value="" onclick="klicken(this.value)">
  
  
  <br/>
  
<!-- End your code here -->
</body>
</html>

PHP:

// Zahl1 wird berechnet
 
var zahl1 = new Array(50);
for (var i = 0; i < zahl1.length; i++) { zahl1[i] = i;
}
   shuffle(zahl1);  

// Zahl2 wird berechnet 

var zahl2 = new Array(50);
for (var i = 0; i < zahl2.length; i++) { zahl2[i] = i;
}
    shuffle(zahl2); 
      
    var min = 2;
    var max = 50;
    var x = Math.floor(Math.random() * (max - min)) + min; 
                
    var min2 = 2;
    var max2 = 50;
    var y = Math.floor(Math.random() * (max2 - min2)) + min2;
  
  // Prüfen dass Zahlen nicht 0 sind

  if (zahl1[x] && zahl[y] > 0) {
                       
    zufallzahlfrage = zahl1[x]  +  zahl2[y];
    ausgeschrieben = zahl1[x]  + " +  " + zahl2[y];
     
    document.write(zahl1[x]  + " +  " + zahl2[y]);
  }
  
  else {
  
    // Ergebnis beider Zufallszahlen
  zufallzahlfrage = zahl1[2]  +  zahl2[3];
    
    // Ausgeschriebene Frage
  ausgeschrieben = zahl1[2]  + " +  " + zahl2[3];
     
    // Frage anzeigen
    document.write(zahl1[2]  + " +  " + zahl2[3]);
  
  }      

};

// Buttonwechsel Zahl
var buttonwechsel = new Array(1,2,3,4);
shuffle(buttonwechsel);
button1 = buttonwechsel[0];
button2 = buttonwechsel[1];
button3 = buttonwechsel[2];
button4 = buttonwechsel[3];
          
document.getElementById(button1);                              
var inhalt1 = document.getElementById(button1).value = zufallzahlfrage; 
        
document.getElementById(button2); 
btn2 = Math.floor((Math.random() * zahl[x]) + zahl[y]);    
var inhalt2 = document.getElementById(button2).value = btn2;       

document.getElementById(button3); 
btn3 = Math.floor((Math.random() * zahl[x]) + zahl[y]);
btn3finish = Math.floor((Math.random() * zahl[x]) + 1);
var inhalt3 = document.getElementById(button3).value = btn3finish;          
                                   
document.getElementById(button4); 
btn4 = Math.floor((Math.random() * zahl[x]) + zahl[y]);
btn4finish = Math.floor((Math.random() * zahl[x]) + zahl[y]);
var inhalt4 = document.getElementById(button4).value = btn4finish; 
             
// Ende Buttonwechsel

// Prüfen welcher Button gedrückt wurde
 
function klicken(clicked_value) {
  if( clicked_value == zufallzahlfrage)
  {

    // Add Punkte

    // Nächste Frage 
       FrageAendern();

    // Buttons übergabe
    
  }
};

wenn die Antwort korrekt war, erscheint direkt die nächste Frage, allerdings in einem neuen Fenster ohne Buttons.

Nun meine Frage: Wie bekomme ich die Buttons mit in die 2. Runde?

Ist es vllt sinnvoller die Buttons direkt in Js zu erstellen?

3. und letzte Frage: Ich schreibe in einem Onlineeditor, dort wird es mir richtig ausgegeben.
Lad ich mir das Template als zip-Datei und öffne die index.html in meinem Browser, sehe ich nur die Buttons ohne jegliche Zahlen. Woran kann das liegen?

Ich hoffe Jemand kann mir bei meinem steinigen Weg etwas unter die Arme greifen

Besten Dank
Js_new

kkapsner · 06. Feb. 2016

Bei deinem Code fehlt irgendwie einiges. Wo ist die Funktion shuffle()? Wo FrageAendern()? Dein separates JS wird nicht in das Dokument eingefügt. (Deswegen solltest du auch eine Meldung in der Fehlerkonsole bekommen.)

Welchen Onlineeditor verwendest du?

PS: document.write()... besonders in deinem Fall nicht empfehlenswert
PPS: auch globale Variablen sind nicht gut.

Zu document.write:

http://www.w3.org/html/wg/drafts/html/CR/webappapis.html#dynamic-markup-insertion schrieb:
This method has very idiosyncratic behavior. In some cases, this method can affect the state of the HTML parser while the parser is running, resulting in a DOM that does not correspond to the source of the document (e.g. if the string written is the string "<plaintext>" or "<!--"). In other cases, the call can clear the current page first, as if document.open( ) had been called. In yet more cases, the method is simply ignored, or throws an exception. To make matters worse, the exact behavior of this method can in some cases be dependent on network latency, which can lead to failures that are very hard to debug. For all these reasons, use of this method is strongly discouraged.

Buttons verschwinden nach Aufruf von onclick...

Js_new

New member

kkapsner

Super Moderator