Uncaught SyntaxError: Missing initializer in const declaration

Question

I am new to learning Javascript and making a sample project to test password strength based on the input that a user provides.

But along the way, I see an error message showing up as follows:

Uncaught SyntaxError: Missing initializer in const declaration

I researched on a similar link to this exact query here: SyntaxError: Missing initializer in const declaration

but it's related to react and I don't understand much.

Here, is my Javascript code with the function in particular that throws error:

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);
}

What I discovered is that the error is related to const declaration at this line here:

const messageElement.innerText = weakness.message;

On internet research, I found this happens if you declare a const with no assignment. But, I wonder why it occurs for me because I have assigned value to it.

Now, I may be asking this question again but this time it's with a perspective of why the error occurs in a vanilla Javascript codebase.

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>

Admin · Accepted Answer

You cannot assign a variable name with dot in it as rightly pointed out by @VLAZ That is not allowed. Now over to fixing your issue, you need to use document.createElement()

How?

As per your code in the function updateStrengthMeter() add this before the incorrect const decalaration

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

The above line creates a div tag(Feel free to use any other as per your need. i am just giving an example here)

Side note: If you need to add attributes do that after , like this :

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

Check the linked MDN reference for more details.

and now you can use the line as per your original code without the const keyword ofcourse

messageElement.innerText = weakness.message;

Uncaught SyntaxError: Missing initializer in const declaration

Tags:

javascript

html

Saudi

1 Answers

Recent Activity

Donate For Us

Uncaught SyntaxError: Missing initializer in const declaration

Tags:

javascript

html

Saudi

1 Answers

Related questions

Recent Activity

Donate For Us