未捕获的 SyntaxError：const 声明中缺少初始化程序答案

【问题标题】：Uncaught SyntaxError: Missing initializer in const declaration未捕获的 SyntaxError：const 声明中缺少初始化程序
【发布时间】：2020-11-05 19:44:25
【问题描述】：

我是学习 Javascript 并制作示例项目以根据用户提供的输入测试密码强度的新手。

但在此过程中，我看到一条错误消息显示如下：

未捕获的语法错误：const 声明中缺少初始化程序

我在这里研究了与此确切查询类似的链接： SyntaxError: Missing initializer in const declaration

不过和react有关，我也不是很懂。

这里是我的 Javascript 代码，其中特别是引发错误的函数：

function updateStrengthMeter() {
  const weaknesses = calculatePasswordStrength(passwordInput.value);
  let strength = 100;
  reasonsContainer.innerHTML = "";
  weaknesses.forEach((weakness) => {
    if (weakness == null) return;
    strength -= weakness.deduction;

    const messageElement.innerText = weakness.message;
    reasonsContainer.appendChild(messageElement);
  });
  strengthMeter.style.setProperty("--strength", strength);
}

我发现该错误与此处这一行的 const 声明有关：

const messageElement.innerText = weakness.message;

在互联网研究中，我发现如果您声明一个没有赋值的 const，就会发生这种情况。但是，我想知道为什么它会发生在我身上，因为我已经为它赋值了。

现在，我可能会再次问这个问题，但这次是从一个角度来看为什么错误发生在普通 Javascript 代码库中。

const strengthMeter = document.getElementById("strength-meter");
const passwordInput = document.getElementById("password-input");
const reasonsContainer = document.getElementById("reasons");

passwordInput.addEventListener("input", updateStrengthMeter);
updateStrengthMeter();

function updateStrengthMeter() {
    const weaknesses = calculatePasswordStrength(passwordInput.value);
    let strength = 100;
    reasonsContainer.innerHTML = "";
    weaknesses.forEach((weakness) => {
        if (weakness == null) return;
        strength -= weakness.deduction;

        const messageElement.innerText = weakness.message;
        reasonsContainer.appendChild(messageElement);
    });
    strengthMeter.style.setProperty("--strength", strength);
}

function calculatePasswordStrength(password) {
    const weaknesses = [];
    weaknesses.push(lengthWeakness(password));
    return weaknesses;
}

function lengthWeakness(password) {
    const length = password.length;

    if (length <= 5) {
        return {
            message: "Your password is too short",
            deduction: 40,
        };
    }

    if (length <= 10) {
        return {
            message: "Your password could be longer",
            deduction: 15,
        };
    }
}

*::before,
*::after,
* {
    box-sizing: border-box;
}

body {
    background-color: hsl(261, 88%, 17%);
    color: hsl(261, 88%, 90%);
    text-align: center;
}

.strength-meter {
    position: relative;
    height: 2rem;
    width: 90%;
    border: 3px solid hsl(261, 88%, 57%);
    border-radius: 1rem;
    margin: 0 auto;
    overflow: hidden;
}

.strength-meter::before {
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
    width: calc(1% * var(--strength, 0));
    background-color: hsl(261, 88%, 67%);
    transition: width 200ms;
}

.password-input {
    margin-top: 1rem;
    width: 90%;
    padding: 0.25rem 0.75rem;
    background-color: hsl(261, 88%, 25%);
    color: white;
    border: 1px solid hsl(261, 88%, 57%);
    outline: none;
    text-align: center;
    border-radius: 0.3rem;
}

.password-input:focus {
    border-color: hsl(261, 88%, 70%);
}

.reasons > * {
    margin-top: 0.5rem;
    color: hsl(261, 88%, 80%);
}

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Password Strength</title>
        <script src="script.js" defer></script>
    </head>
    
    <body>
        <h1>Password Strength Test</h1>
        <div class="strength-meter" id="strength-meter"></div>
        <input class="password-input" id="password-input" value="password" type="text" autofocus aria-labelledby="password" />
        <div id="reasons" class="reasons"></div>
    </body>
</html>

【问题讨论】：

const messageElement.innerText = weakness.message; 甚至不是有效的代码——你不能有一个带有点的变量名。我怀疑你甚至试图在那里声明一个变量，看来你应该只有 messageElement.innerText = weakness.message 而不是变量声明
好的，基本上我在考虑创建一个div 并分配weakness.message 的文本内容
您不需要const 关键字来进行分配。只有当你想创建一个新变量时才需要它。
创建一个新的div并分配文本内容？？你可以在这里粘贴你的 HTML 或者你的 JS 代码来看看你到底在找什么
@excetra 当然让我这样做。

标签： javascript html

【解决方案1】：

正如@VLAZ 正确指出的那样，您不能分配带有点的变量名这是不允许。现在要解决您的问题，您需要使用document.createElement()

怎么做？

根据您在函数 updateStrengthMeter() 中的代码，在不正确的 const 声明之前添加此代码

const messageElement = document.createElement("div");

上面的行创建了一个 div 标签（根据您的需要随意使用任何其他标签。我只是在这里举个例子）

旁注： 如果您需要添加属性，请在之后执行此操作，如下所示：

let expandingList = document.createElement('ul', { is : 'expanding-list' })

查看链接的 MDN 参考以获取更多详细信息。

现在您可以根据原始代码使用该行，而无需 const 关键字 ofcourse

messageElement.innerText = weakness.message;

【讨论】：