JavaScript函数返回值与innerText赋值的正确用法详解-js教程

javascript函数返回值与innertext赋值的正确用法详解：`innertext` 只能接收字符串等原始值，不能直接显示 `console.log` 的输出；若要将函数结果写入页面，必须让函数显式 `return` 字符串，而非仅调用 `console.log()`。

在 JavaScript 中，console.log() 仅用于向浏览器控制台输出调试信息，它不会返回任何值（即隐式返回 undefined）。因此，当你执行：

const comResult = compareResults(); // → comResult === undefined
addPara.innerText = comResult;      // → innerText 被设为 "undefined"

实际上，compareResults() 函数内部虽有多个 console.log()，但没有 return 语句，导致整个函数默认返回 undefined —— 这正是你看到 “undefined” 文本出现在页面上的根本原因。

✅ 正确做法是：将逻辑结果构造为字符串，并通过 return 显式返回，再赋值给 innerText。以下是优化后的 compareResults() 函数示例（已精简逻辑、修复对象属性名不一致问题，并增强可读性）：

// 修正：computer 对象中应为 compChoice，而非 computerChoice（原代码存在拼写错误）
function computerChooses() {
  const randomIndex = Math.floor(Math.random() * picks.length);
  computer.compChoice = picks[randomIndex]; // ✅ 使用正确的属性名
}

function compareResults() {
  computerChooses();

  const { compChoice } = computer;
  const playerChoice = picks[0]; // 注意：此处为固定选择，实际项目中建议从用户交互获取

  if (compChoice === playerChoice) {
    return `It's a Draw! Computer and Player both chose ${compChoice}.`;
  }

  // 判断胜负（使用更清晰的条件组合）
  const winConditions = {
    [picks[0]]: picks[1], // Lapis beats Papyrus
    [picks[1]]: picks[2], // Papyrus beats Scalpellus
    [picks[2]]: picks[0]  // Scalpellus beats Lapis
  };

  if (winConditions[playerChoice] === compChoice) {
    return `Player wins! Computer chose ${compChoice} and Player chose ${playerChoice}.`;
  } else {
    return `Computer wins! Computer chose ${compChoice} and Player chose ${playerChoice}.`;
  }
}

// ✅ 正确调用：函数返回字符串，可直接赋值
const addPara = document.createElement("p");
addPara.id = "final-answer"; // 推荐用 .id 而非 setAttribute
addPara.innerText = compareResults(); // ← 现在返回的是有效字符串！

document.querySelector(".header3")?.append(addPara); // 使用可选链避免空节点报错

⚠️ 注意事项：