JavaScript中innerText赋值显undefined及innerHTML报错问题排查

• 疑问：JavaScript中element.innerText能否承载输出console.log信息的函数返回值？
• 具体问题：执行addPara.innerText = comResult;时页面显示“undefined”，但直接赋值字符串如addPara.innerText = "Hello";可正常显示。尝试用document.getElementById("addPara");结合innerHTML也报错。

完整代码 #

// 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);

尝试过的代码 #

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

问题分析与解决 #

核心原因 #

你的compareResults()函数仅通过console.log输出内容，但没有返回字符串值。JavaScript中没有return语句的函数默认返回undefined，所以comResult拿到的就是undefined，赋值给innerText自然显示“undefined”。

修复方案 #

修改compareResults()，让它生成结果字符串并返回，同时保留控制台输出：

function compareResults() {
  computerChooses();
  let resultStr;
  if (computer.computerChoice === playerChoice) {
    resultStr = "It's a Draw! Computer and Player both chose " + computer.computerChoice;
  } else if (computer.computerChoice === picks[0]) {
    if (playerChoice === picks[1]) {
      resultStr = "Player wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice;
    } else {
      resultStr = "Computer wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice;
    }
  } else if (computer.computerChoice === picks[1]) {
    if (playerChoice === picks[0]) {
      resultStr = "Computer wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice;
    } else { 
      resultStr = "Player wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice;
    }
  } else if (computer.computerChoice === picks[2]) {
    if (playerChoice === picks[0]) {
      resultStr = "Player wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice;
    } else { 
      resultStr = "Computer wins! Computer chose " + computer.computerChoice + " and Player chose " + playerChoice;
    }
  }
  // 保留控制台输出
  console.log(resultStr);
  // 返回结果字符串
  return resultStr;
}

修改后，const comResult = compareResults();会拿到正确的结果字符串，赋值给innerText就能正常显示内容。

另外，你尝试的document.getElementById("addPara");存在错误：你创建的元素id是final-answer而非addPara，且元素未挂载到DOM时getElementById无法获取到——直接使用已创建的addPara变量操作即可，无需重复查询。

内容的提问来源于stack exchange，提问作者tre3