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
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 syntaxIn your case that would mean
You function is not returning anything. In JavaScript function that do not have a return statement implicitly return ‘undefined’
Change your function to this
Now, the compareResults() function returns the appropriate result string, and you can assign it to the innerText of the addPara element as you intended.
Since compareResults() now returns a string, you can directly set it as the innerText of the addPara element. So update the code like this.