个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我刚开始学习 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
我正在尝试将 keras.initializers 引入我的网络，following this link : import keras from keras.optimizers import RMS
我正在为程序创建某种前端。为了启动程序，我使用了调用 CreateProcess()，其中接收到一个指向 STARTUPINFO 结构的指针。初始化我曾经做过的结构: STARTUPINFO star
我已经模板化了 gray_code 类，该类旨在存储一些无符号整数，其基础位以格雷码顺序存储。这里是: template struct gray_code { static_assert(st
我已经查看了之前所有与此标题类似的问题，但我找不到解决方案。所有错误都表明我没有初始化 ArrayList。我是否没有像 = new ArrayList 这样初始化 ArrayList？ ？ impo
当涉及到 Swift 类时，我对必需的初始化器和委托(delegate)的初始化器有点混淆。 正如您在下面的示例代码中所见，NewDog 可以通过两种方式中的一种进行初始化。如您所见，您可以通过在初始
几天来我一直在为一段代码苦苦挣扎。我在运行代码时收到的错误消息是: 错误:数组初始值设定项必须是初始值设定项列表 accountStore(int size = 0):accts(大小){} 这里似乎
我想返回一个数组，因为它是否被覆盖并不重要，我的方法是这样的: double * kryds(double linje_1[], double linje_2[]){ double x = linje
尝试在 C++ 中创建一个简单的 vector 时，出现以下错误: Non-aggregates cannot be initialized with initializer list. 我使用的代码
如何在构造函数中(在堆栈上)存储初始化列表所需的临时状态？ 例如，实现这个构造函数…… // configabstraction.h #include class ConfigAbstraction
我正在尝试编写一个 native Node 插件，它枚举 Windows 机器上的所有窗口并将它们的标题数组返回给 JS userland。 但是我被这个错误难住了: C:\Program Files
#include using namespace std; struct TDate { int day, month, year; void Readfromkb() {
我很难弄清楚这段代码为何有效。我不应该收到“数组初始值设定项必须是初始值设定项列表”错误吗？ #include class B { public: B() { std::cout << "B C
std::map m = { {"Marc G.", 123}, {"Zulija N.", 456}, {"John D.", 369} }; 在 Xcode 中，我将 C+
为了帮助你明白这一点，我给出了我的代码:(main.cpp)，只涉及一个文件。 #include #include using namespace std; class test{ public
这在 VS2018 中有效，但在 2008 中无效，我不确定如何修复它。 #include #include int main() { std::map myMap = {
我有一个类: #include class Object { std::shared_ptr object_ptr; public: Object() {} template
我正在为 POD、STL 和复合类型(如数组)开发小型(漂亮)打印机。在这样做的同时，我也在摆弄初始化列表并遇到以下声明 std::vector arr{ { 10, 11, 12 }, { 20,
我正在使用解析实现模型。 这是我的代码。 import Foundation import UIKit import Parse class User { var objectId : String
我正在观看 Java 内存模型视频演示，作者说与 Lazy Initialization 相比，使用 Static Lazy Initialization 更好，我不清楚他说的是什么想说。 我想接触社
如果您查看 Backbone.js 的源代码，您会看到此模式的多种用途: this.initialize.apply(this, arguments); 例如，这里: var Router =
我是一名优秀的程序员,十分优秀！