innerHTML returns undefined – JavaScript

I’m creating a game on the web for my studies. I need to create a card game where each card has its own data (number and power name), data is taken from data.txt and put in an array that is then randomized. data.txt looks something like this:

0
Bored cat
-8
Biting
-10
Scratching

Play() function scrambles the deck when the PLAY button is pressed. Once all cards are randomized I call a function addCardCat() which should create a card div with h1 and h3 tags. In h1 tag innerHTML should be a number, and h3 should be the power name, however, I always get returned undefined. What could be the issue?

JS CODE

let counter = 0;
var deck = [];

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

let fs = require('fs');
let data = fs.readFileSync('data.txt', 'utf8').split('rn');

// ----------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);
}```

Answer

It’s hard to tell with the subminimal code provided, but it is likely that this return number, power; is causing your issue.

The return statement ends function execution and specifies a value to be returned to the function caller.

MDN

The return statement will only return a single value. You cannot use a comma-separated list. See the first snippet below for a demonstration of what happens if you use a comma-separated list.

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

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

Notice that you only got back the last value in the comma-separated list.

You can, however, wrap the 2 values in an array or object, for example, and then return the array or object. You can then use the appropriate destructuring method to extract the 2 values from the array or object.

Like this:

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

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

That being said, it does seem odd that you are returning the same values you passed to the function as arguments without modifying them in any way.

Depending on what you do with the returned values, which unfortunately you don’t show in your question, you will need to do one of the following:

• Use the method I described.
• Return a valid single value (including true or false) as needed.
• Eliminate the return statement.