Aufruf einer For-Schleife von einem OnClick-Button

Question

Ich glaube, dass dies etwas mit globalen Variablen zu tun hat, aber ich bin mir nicht sicher, ich denke, dass es etwas mit Variablen aus meinem script.js zu tun hat, kann mich jemand informieren der richtige Weg, dies zu tun?

EDIT UNTEN

Ich versuche, eine Taste, um 7 zufällige Bilder zu erstellen, aber wenn ich die Schleife in der Schaltfläche nichts verwenden passiert.

Grundsätzlich funktioniert das:

<script> 
function drawCard() { 
    var x = document.createElement("IMG"); 
    x.setAttribute("src", imageLocation); 
    x.setAttribute("alt", card); 
    document.body.appendChild(x); 
    var element = document.getElementById("cardArea"); 
    element.appendChild(x); 
} 
</script> 

Aber dies nicht:

<script> 
function drawHand() { 
    var newFull = fullDeck.slice(); 
    document.write(newFull); 
    var k = 0; 


    for (k = 0; k < 7; k++) {    
     var randomCard = Math.floor((Math.random() * newFull.length) + 1); 

     chosenCard = newFull[randomCard]; 
     var chosenCardString = String(chosenCard); 
     var randomIndex = newFull.indexOf(chosenCard); 

     newFull.splice(randomIndex, 1); 

     var imageLocation = 'Images/' + chosenCardString.replace(/ /g, '') + '.png'; 

     var y = document.createElement("IMG"); 
     y.setAttribute("src", imageLocation); 
     y.setAttribute("alt", chosenCard); 
     document.body.appendChild(y); 
     var element = document.getElementById("cardArea"); 
     element.appendChild(y);  
    }   
}  
</script> 

Und ich habe absolut keine Ahnung, warum, bin ich vermisse betriebener der for-Schleife? oder der Knopf? oder die onClick? oder alle von ihnen?

Normalerweise benutze ich Python und konnte den Rest meines Programms in JavaScript (durch Schweiß, Blut und ein paar lange Stunden) übersetzen, aber dieser Teil entzieht sich mir vollständig.

Jede Rückmeldung würde sehr geschätzt werden, mein Verstand ist völlig leer hierüber gegangen.

Die document.write(newFull); kehrt nicht einen beliebigen Wert innerhalb drawHand()

Eine letzte Sache, die ich erwähnen sollte, dieser Code funktioniert ohne die Schaltfläche in Ordnung, aber wenn innerhalb der Schaltfläche setzen ist es völlig unempfänglich.

bearbeiten

Als requisted, hier sind meine Zuhörer:

HTML

<button onclick="drawCard()" class="hvr-float-shadow">Draw a Card</button> 

<button onclick="drawHand()" class="hvr-float-shadow">Draw Hand</button> 

<button onclick="" class="hvr-float-shadow">Mulligan</button> 

Und der Code, den ich die anfängliche Schleife in einer separaten Java-Script-Datei ausführen verwenden.

script.js:

window.onload = function() { 
var fileInput = document.getElementById('fileInput'); 
var fileDisplayArea = document.getElementById('fileDisplayArea'); 

fileInput.addEventListener('change', function(e) { 
var file = fileInput.files[0]; 
var textType = /text.*/; 

if (file.type.match(textType)) { 
    var reader = new FileReader(); 

    reader.onload = function(e) { 

    var text = reader.result; 

    var lines = text.match(/^.*((\r\n|\n|\r)|$)/gm); 

    var index = lines.indexOf('\n'); 
    lines.splice(index, 99); 
    var index2 = lines.indexOf(' '); 
    lines.splice(index2, 99); 

    var j = 0; 

    var fullDeck = []; 

    while (j < lines.length){ 

     var card = lines[j]; 

     var cardNumber = card.match(/[0-9]+/g); 
     var cardlist = card.match(/[a-zA-Z ]+/g); 


     j =j + 1; 
     i = 0 
     while (i < Number(cardNumber)){ 
      fullDeck.push(cardlist); 
      i = i + 1 
     } 



    } 

    var newFull = fullDeck.slice(); 
    var k = 0; 
    for (k = 0; k < 7; k++) { 

      var randomCard = Math.floor((Math.random() * newFull.length) + 1); 

      chosenCard = newFull[randomCard]; 
      var chosenCardString = String(chosenCard); 
      var randomIndex = newFull.indexOf(chosenCard); 

      newFull.splice(randomIndex, 1); 

      var imageLocation = 'Images/' + chosenCardString.replace(/ /g, '') + '.png'; 

      var y = document.createElement("IMG"); 
      y.setAttribute("src", imageLocation); 
      y.setAttribute("alt", chosenCard); 
      document.body.appendChild(y); 
      var element = document.getElementById("cardArea"); 
      element.appendChild(y); 



    }  
    fileDisplayArea.innerText = "File Loaded!" 


    } 

    reader.readAsText(file); 

} else { 
    fileDisplayArea.innerText = "File not supported!" 
} 
}); 
} 

/bearbeiten

Answer 1

Wenn document.write() verwendet wird, nachdem die Seite fertig geladen ist, löscht es zuerst das aktuelle Dokument und dann auf ein neues leeres Dokument schreibt - Wisch aus allen vorherigen Inhalten. Also, diese Zeile:

document.write(newFull); 

ist wahrscheinlich verursacht Ihnen ein großes Problem.

Da dies fast nie das ist, was Sie wollen, sollte document.write() nicht in Ereignishandlern verwendet werden, die nach dem Laden der Seite ausgeführt werden. Stattdessen sollten Sie reguläre DOM-Manipulationsfunktionen verwenden, die das aktuelle DOM direkt modifizieren.

Answer 2

So wie es sich herausstellt, war dies ein Problem mit meinen Variablen lokal statt global, absolut dummer Fehler. Ich habe versucht, eine Variable zu verwenden, ohne zu merken, dass var es nur lokal machen würde.Ich änderte meine fullDeck Variable global wie folgt:

Lokale Variable:

var fullDeck = []

Globale Variable:

fullDeck = []

wohl offensichtlich zu viele, aber ich wollte es incase jemand posten sonst stieß auf diese Art von Problem.