can element.innerText hold a function which displays console.log message in a Paragraph for Javascript?

Question

i am getting "undefined" from this particular line of code when i innerText a variable

addPara.innerText = comResult; // <- this is showing up as "undefined" when i want it to show the string that is printed in the console.

when i change the innerText to something like this

addPara.innerText = "Hello"; // <- it will print out Hello on my HTML.

This is the entire line of code

// Array for game options
const picks = ["Lapis", "Papyrus", "Scalpellus"];


// Objects for starting player characteristics
const player = {
  playerChoice: null,
}

// Objects for starting computer characteristics
const computer = {
  compChoice: null,
}

//Player choice
const playerChoice = picks[0];

// Choice generator
function computerChooses() {
  const randomIndex = Math.floor(Math.random() * picks.length);
    computer.computerChoice = picks[randomIndex];
}

//Check results

function compareResults() {
  computerChooses ();
   if (computer.computerChoice === playerChoice) {
       console.log("It's a Draw! Computer and Player both chose " + computer.computerChoice);
   } else if (computer.computerChoice === picks[0]) {
       if (playerChoice === picks[1]) {
         console.log("Player wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice)
       } else {
         console.log("Computer wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice)
       }
   } else if (computer.computerChoice === picks[1]) {
     if (playerChoice === picks[0]) {
       console.log("Computer wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice)
     } else { 
        console.log("Player wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice)
     }
   } else if (computer.computerChoice === picks[2]) {
     if (playerChoice === picks[0]) {
       console.log("Player wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice)
     } else { 
     console.log("Computer wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice)}
   }
 } 



const comResult = compareResults();

const addPara = document.createElement("p");
addPara.setAttribute("id", "final-answer");

addPara.innerText = comResult; // <- this is showing up as "undefined" when i want it to show the string that is printed in the console.

console.log(addPara); // to check addPara details

const head3 = document.querySelector(".header3");
head3.append(addPara);

i have tried using

document.getElementById("addPara");
addPara.innerHTML = "hello world";

but it doesnt work and is showing me an error regarding innerHTML as well..

Answer 1

You function is not returning anything. In JavaScript function that do not have a return statement implicitly return 'undefined' Change your function to this

function compareResults() {
  computerChooses();
  if (computer.computerChoice === playerChoice) {
    return "It's a Draw! Computer and Player both chose " + computer.computerChoice;
  } else if (computer.computerChoice === picks[0]) {
    if (playerChoice === picks[1]) {
      return "Player wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice;
    } else {
      return "Computer wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice;
    }
  } else if (computer.computerChoice === picks[1]) {
    if (playerChoice === picks[0]) {
      return "Computer wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice;
    } else {
      return "Player wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice;
    }
  } else if (computer.computerChoice === picks[2]) {
    if (playerChoice === picks[0]) {
      return "Player wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice;
    } else {
      return "Computer wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice;
    }
  }
}

Now, the compareResults() function returns the appropriate result string, and you can assign it to the innerText of the addPara element as you intended.

const addPara = document.createElement("p");
addPara.setAttribute("id", "final-answer");

addPara.innerText = compareResults(); // Set the innerText directly here

console.log(addPara); // to check addPara details

const head3 = document.querySelector(".header3");
head3.append(addPara);

Since compareResults() now returns a string, you can directly set it as the innerText of the addPara element. So update the code like this.

Answer 2

In order for the function to return a string when you invoke it, the function must return the string. This is achieved with the following syntax

function getHelloWorld() {
    return "Hello world";
}

element.innerText = getHelloWorld();

In your case that would mean

function compareResults() {
  computerChooses ();
   if (computer.computerChoice === playerChoice) {
       return "It's a Draw! Computer and Player both chose " + computer.computerChoice;
   } else if (computer.computerChoice === picks[0]) {
       if (playerChoice === picks[1]) {
         return "Player wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice;
       } else {
         return "Computer wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice;
       }
   } else if (computer.computerChoice === picks[1]) {
     if (playerChoice === picks[0]) {
       return "Computer wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice;
     } else { 
        return "Player wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice;
     }
   } else if (computer.computerChoice === picks[2]) {
     if (playerChoice === picks[0]) {
       return "Player wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice;
     } else { 
       return "Computer wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice;
     }
   }
 }

addPara.innerText = compareResults();