点击按钮出现Uncaught ReferenceError: Cannot access 'euro' before initialization的原因

核心错误原因 #

你在calc函数里写了let euro = euro.value;，这里的问题是使用let声明变量euro的同时，试图读取这个未初始化变量的.value属性。根据JavaScript的规则，let声明的变量会进入「暂时性死区」——在变量完成初始化之前，无法访问它。此时右边的euro指向的是你刚声明但还没赋值的变量，而非页面上id为euro的输入框，因此抛出该错误。

除此之外，你的代码还有两个潜在问题：

• 依赖浏览器自动把元素id绑定到全局对象的特性（比如直接写usd.value），这不是标准推荐的写法，易引发命名冲突。
• 输入框里的数值用逗号作为小数点（如0,00），直接做乘法运算会得到NaN，因为JS只识别小数点.。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Währungsrechner</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div></div>
<form>
    <h1>WÄHRUNGSRECHNER</h1>
    <div></div>
    <div>
      <input id="euro" value="0,00" type="text">
      <label>EUR</label>
    </div>
    <div>
      <input id="usd" value="0,00">
      <label>USD</label>
    </div>
</form>
    <button onclick="calc()">Berechnen</button>

<script>
    function calc(){
       // 明确获取输入框元素，避免依赖全局绑定
       const euroInput = document.getElementById('euro');
       const usdInput = document.getElementById('usd');
       
       // 转换逗号小数点为JS可识别的格式，再转为数字
       let euroValue = parseFloat(euroInput.value.replace(',', '.'));
       
       // 计算结果并转回逗号小数点格式，保留两位小数
       let result = euroValue * 1.1;
       usdInput.value = result.toFixed(2).replace('.', ',');
    }
</script>
</body>
</html>

关键修改说明 #

1. 避免变量名冲突：用euroInput代替原euro变量名，明确指向输入框元素，消除暂时性死区问题。
2. 标准获取元素方式：使用document.getElementById()获取DOM元素，不再依赖浏览器的全局id绑定，代码更稳定。
3. 处理本地化数值格式：将输入的逗号小数点替换为.进行计算，结果再转回逗号格式，符合欧洲地区的数值显示习惯。

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