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>

const messageElement.innerText = weakness.message; is not even valid code - you cannot have a variable name with a dot in it. I doubt you're trying to even declare a variable there, it seems you should only have messageElement.innerText = weakness.message instead of a variable declaration — VLAZ
– VLAZ, Commented Jul 16, 2020 at 7:29
Okay so basically I was thinking of creating a div and assigning the text contents of weakness.message — Saudi
– Saudi, Commented Jul 16, 2020 at 7:32
You don't need the const keyword to make an assignment. You only need it if you want to create a new variable. — VLAZ
– VLAZ, Commented Jul 16, 2020 at 7:34
Creating a new div and assigning text contents?? Can yo paste your HTML here and perhaps your JS code to see what exactly you're looking for — user13903745
– user13903745, Commented Jul 16, 2020 at 7:36

user13903745 · Accepted Answer · 2020-07-16 07:57:40Z

2

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;

answered Jul 16, 2020 at 7:57

user13903745

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Uncaught SyntaxError: Missing initializer in const declaration

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related