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

javascript 函数返回值与 innertext 赋值的正确用法：`innertext` 只能接收字符串等原始值，而 `compareresults()` 当前无返回值（默认返回 `undefined`），需将 `console.log()` 替换为 `return` 语句，使函数输出可赋值的字符串。

在 JavaScript 中，element.innerText 是一个只接受字符串（或可被隐式转换为字符串）的属性，它不会执行函数、不捕获控制台输出，也不会“读取” console.log() 打印的内容。你遇到的 “undefined” 正是因为 compareResults() 函数中所有逻辑都通过 console.log() 输出，但没有 return 任何值——此时函数默认返回 undefined，因此 comResult 的值就是 undefined，最终被赋给 addPara.innerText。

✅ 正确做法是：让 compareResults() 显式返回一个字符串，然后将其直接赋值给 innerText。以下是优化后的关键代码：

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]) { // Lapis
    return playerChoice === picks[1] 
      ? `Player wins! Computer chose ${computer.computerChoice} and Player chose ${playerChoice}`
      : `Computer wins! Computer chose ${computer.computerChoice} and Player chose ${playerChoice}`;
  } else if (computer.computerChoice === picks[1]) { // Papyrus
    return playerChoice === picks[0]
      ? `Computer wins! Computer chose ${computer.computerChoice} and Player chose ${playerChoice}`
      : `Player wins! Computer chose ${computer.computerChoice} and Player chose ${playerChoice}`;
  } else if (computer.computerChoice === picks[2]) { // Scalpellus
    return playerChoice === picks[0]
      ? `Player wins! Computer chose ${computer.computerChoice} and Player chose ${playerChoice}`
      : `Computer wins! Computer chose ${computer.computerChoice} and Player chose ${playerChoice}`;
  }
}

// ✅ 直接调用并赋值（无需中间变量 comResult）
const addPara = document.createElement("p");
addPara.id = "final-answer"; // 更简洁的写法，替代 setAttribute
addPara.innerText = compareResults(); // ← 现在返回的是字符串，不是 undefined

document.querySelector(".header3").append(addPara);

? 关键注意事项：

• ❌ console.log() 仅用于调试，不会产生返回值；它和 innerText 完全无关。
• ✅ return 是函数向外部传递数据的唯一标准方式。
• ? 避免冗余变量（如 const comResult = compareResults()），除非需要复用结果或做额外处理。
• ? 使用模板字符串（`…${value}…`）提升可读性与安全性（避免拼接错误）。
• ⚠️ 原代码中 computer.computerChoice 存在属性名不一致问题：对象定义为 computer.compChoice: null，但函数中赋值为 computer.computerChoice —— 请统一为 computer.compChoice 并同步更新所有引用，否则将导致 undefined 或运行时错误。

? 进阶建议： 后续可将游戏逻辑进一步解耦，例如分离「生成结果文本」与「执行判定」，便于测试与维护。例如封装为 getResultMessage() 纯函数，输入 playerChoice 和 computerChoice，输出提示字符串——真正实现关注点分离。