JS将输入框值存入对象时count变量未被识别为动态键问题求解

你的代码存在两个核心错误：

• 函数内部重复声明了count变量
  你在add_ele函数中使用var count=count+1重新创建了局部count变量，和全局声明的count是完全独立的两个变量。根据JavaScript变量提升规则，函数执行时局部count会先被初始化为undefined，undefined+1的结果是NaN，也永远不会修改全局count的数值。
• 对象字面量默认将未包裹的键转为字符串
  直接写{count:x}时，JavaScript会默认把键名转为字符串"count"，不会读取count变量的实际值。如果要使用变量的值作为对象的键，需要使用ES6新增的计算属性语法，用方括号包裹变量名。

修改add_ele函数的两处代码即可：

1. 去掉count=count+1前的var，直接修改全局的计数变量
2. 生成键值对时使用[count]作为键，启用计算属性
   修正后的完整代码如下：

<!DOCTYPE html>
<html>
<body>

<input type="text" id="task">
<button onclick="add_ele()">add</button>
<p id="para"></p>
<script>
var l={}
var count=0;
function add_ele(){
 var x = document.getElementById("task").value;
 count = count + 1; // 去掉var，修改全局count
 var pair= {[count]:x}; // 用计算属性将count的值作为键
 l={...l,...pair};
 document.getElementById("para").innerHTML = JSON.stringify(l);
}
</script>

</body>
</html>

修改后每次点击add按钮，全局count会自增1，并且以递增的数值作为键存入对象，输出效果和你预期一致。

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