个人中心
gpt4 book ai didi

javascript - 未捕获的语法错误 : Missing initializer in const declaration

转载 作者：行者123 更新时间：2023-12-05 05:00:53 24 4
gpt4 key购买 nike

我刚开始学习 Javascript 并制作了一个示例项目来根据用户提供的输入来测试密码强度。

但一路上，我看到一条错误信息显示如下:

Uncaught SyntaxError: Missing initializer in const declaration

我在此处研究了与此确切查询的类似链接: 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;

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

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

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>

最佳答案

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

怎么做？

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

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

上面一行创建了一个div标签(你可以根据需要随意使用任何其他标签。我只是在这里举个例子)

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

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

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

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

messageElement.innerText = weakness.message;

关于javascript - 未捕获的语法错误 : Missing initializer in const declaration，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62929619/

24 4 0
文章推荐： reactjs - 无法解析项目中已发布的 NPM 模块
文章推荐： sql - 雪花查询已终止 : "SQL execution canceled"
文章推荐： dbt - 我们如何在 SCD 1 实现的增量模型中使用合并语句
文章推荐： vue.js - 这在 sfc vue 方法中是未定义的
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com