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