时间戳

首页 > 解决方案 > innerHTML 返回 undefined - JavaScript

javascript - innerHTML 返回 undefined - JavaScript

问题描述

我正在为我的学习在网络上创建一个游戏。我需要创建一个纸牌游戏，其中每张纸牌都有自己的数据（数字和权力名称），数据取自 data.txt 并放入一个随机数组中。data.txt 看起来像这样：

0
Bored cat
-8
Biting
-10
Scratching

当按下 PLAY 按钮时，Play() 函数会打乱卡座。一旦所有卡片都被随机化，我调用一个函数 addCardCat() ，它应该创建一个带有 h1 和 h3 标签的卡片 div。在 h1 标记中，innerHTML 应该是一个数字，而 h3 应该是电源名称，但是，我总是返回 undefined。可能是什么问题？

JS代码


let counter = 0;
var deck = [];

// ----------READING----------//

let fs = require('fs');
let data = fs.readFileSync('data.txt', 'utf8').split('\r\n');

// ----------RANDOM NUMBER GENERATOR----------//

let numberArray = Array.from(Array(54).keys())

// ----------ARRAY SCRAMBLE---------//

function scrambleArray(array){
    let currentIndex = array.length,  randomIndex;
  
    // While there remain elements to shuffle...
    while (currentIndex != 0){
  
      // Pick a remaining element...
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex--;
  
      // And swap it with the current element.
      [array[currentIndex], array[randomIndex]] = [
        array[randomIndex], array[currentIndex]];
    }
  
    return array;
}

// ----------PLAYING DECK----------//

function scrambleDeck(array){
    for(var i = 0; i < 54; i++){
        var j = numberArray[i];
        array.push(data[j*2]);
        array.push(data[j*2+1]);
    }
    return array;
}

// ----------ADD CARD----------//

function addCardCat(number, power) {
    counter++;
    var newDiv = document.createElement("div");

    newDiv.className += " cat__card";
    newDiv.id = 'card-' +counter;
    
    // newDiv.onclick = removeCardCat();
    // newDiv.onclick = function() { alert('blah'); };

    document.getElementById('cat').appendChild(newDiv);

    var newH1 = document.createElement("h1");
    var newH3 = document.createElement("h3");
    document.getElementById('card-' +counter).appendChild(newH1);
    document.getElementById('card-' +counter).appendChild(newH3);
    
    newH1.innerHTML = number;
    newH3.innerHTML = power;

    return number, power;
}

// ----------START GAME----------//

function play() {
    document.getElementById("play").style.display = "none";
    scrambleArray(numberArray);
    scrambleDeck(deck);
}```

标签： javascripthtml

解决方案

很难用提供的次要代码来判断，但这很可能return number, power;是导致您的问题的原因。

return 语句结束函数执行并指定要返回给函数调用者的值。

MDN

return 语句只会返回一个值。您不能使用逗号分隔的列表。请参阅下面的第一个片段，以演示如果您使用逗号分隔的列表会发生什么。

let x = function(number, power) {
  //Do stuff
  return number, power;
}

console.log(x(2, 5));

请注意，您只取回了逗号分隔列表中的最后一个值。

但是，您可以将这 2 个值包装在一个数组或对象中，例如，然后返回该数组或对象。然后，您可以使用适当的解构方法从数组或对象中提取 2 个值。

像这样：

let x = function(number, power) {
  //Do stuff
  return [number, power];
}

console.log(x(2, 5));

话虽这么说，但您返回的值与传递给函数的参数相同，而没有以任何方式修改它们，这似乎很奇怪。

根据您对返回值的处理方式，不幸的是您没有在问题中显示，您需要执行以下操作之一：

  • 使用我描述的方法。
  • 根据需要返回一个有效的单个值（包括真或假）。
  • 消除return语句。

推荐阅读