不使用eval将字符串转为变量名：获取HTML输入值的替代方案

核心问题分析 #

你用const声明的player1NameInput和player2NameInput如果在函数/模块作用域内，不会挂载到全局window对象上，所以window[变量]和Function方法都访问不到这些局部变量——这就是你之前尝试失败的原因。

方案1：用对象统一管理元素（推荐） #

把所有玩家输入元素放到一个对象里，通过键名动态访问，完全规避eval：

// 用对象存储，替代单独的变量
const playerInputs = {
  player1: document.getElementById("name1"),
  player2: document.getElementById("name2")
};

const player = event.target.id.slice(7,14); // 值为"player1"或"player2"
let nameElement = document.getElementById(`${player}-name`);

// 直接通过对象键访问对应元素
nameElement.textContent = playerInputs[player].value + ": ";
playerInputs[player].value = "";

方案2：直接动态获取DOM元素（更简洁） #

既然你已经能拿到player标识（player1/player2），可以直接拼接ID重新获取元素，省掉提前存储变量的步骤：

const player = event.target.id.slice(7,14);
let nameElement = document.getElementById(`${player}-name`);

// 从player字符串里提取数字，拼接成输入框ID
const inputId = `name${player.slice(-1)}`;
const inputElement = document.getElementById(inputId);

nameElement.textContent = inputElement.value + ": ";
inputElement.value = "";

为什么之前的方法失效？ #

• window[${player}NameInput]：const声明的局部变量不会成为window的属性，只有全局作用域的var变量才会自动挂载。
• Function方法：它创建的函数在全局作用域执行，无法访问当前函数/模块内的局部变量，所以会抛出ReferenceError。

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