javascripthtmlinnertext

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


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


Solution

  • 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();