skip to Main Content

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

2

Answers


  1. 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();
    
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search