Question

我认为这与全局变量有关，但是我不确定，我认为它与我的script.js调用变量有关，有人能告诉我正确的方法吗？

在底部编辑

我试图获得一个按钮来创建7个随机图像，但是当我在按钮内使用循环时没有任何反应。

基本上，这有效：

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

但这不是：

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

我完全不知道为什么，我错过了 - 使用for循环？还是按钮？还是onClick？还是所有人？

我通常使用python，并且已经能够将我的程序的其余部分翻译成JavaScript（通过汗水，血液和一些长时间），但这部分完全不适合我。

任何反馈都会非常感激，我的思绪已经完全消失了。

document.write(newFull);不会在drawHand()

中返回任何值

我要提到的最后一件事是，这个代码在没有按钮的情况下工作正常，但是当放入按钮时它完全没有响应。

修改

如上所述，以下是我的听众：

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>

我用来在单独的java脚本文件中运行初始循环的代码。

的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!"
}
});
}

/修改

Answer 1

在页面加载完成后使用document.write()时，它首先清除当前文档，然后写入新的空文档 - 清除所有先前的内容。所以，这一行：

document.write(newFull);

可能会给您带来严重问题。

由于这几乎不是您想要的，因此不应在加载页面后运行的事件处理程序中使用document.write()。相反，您应该使用常规DOM操作函数来直接修改当前DOM。

Answer 2

事实证明这是一个问题，我的变量是本地的而不是全局的，绝对是愚蠢的错误。我试图使用一个变量而没有意识到var只会使它成为本地变量。我将fullDeck变量更改为全局，如下所示：

本地变量：

var fullDeck = []

全局变量：

fullDeck = []

对很多人来说可能很明显，但我想发布它，因为任何人都遇到过这种问题。

从onClick按钮

2 个答案: