Добавление и удаление формы через js не работает

Я новичок, пытаюсь изучить JavaScripts. Итак, я пытаюсь клонировать приложение под названием Momentum, и у меня возникает проблема с добавлением и удалением формы и имени пользователя.

как видно из функции loadName(), если есть имя, она должна активировать функцию welcomeUser(), чтобы удалить класс "показ" из формы и добавить "показ" в список классов приветствия. Если имени нет, должна отображаться форма, в которой пользователь может ввести свое имя.

Однако, даже если я назначу имя или нет, ни форма, ни имя не будут отображаться.

Я пытался изменить имена, файл css и другие вещи, которые я мог придумать, но это не сработало, как я ожидал. Ниже приведен код, с которым я работаю. Вероятно, это какая-то глупая ошибка, которую я сделал, но я просто не могу понять, в чем проблема.

приветствия.js

const form = document.querySelector(".js-form");
const input = form.querySelector("input");
const greeting = document.querySelector(".js-greetings");
const USER_LS = "currentUser";
const SHOWING_CN = "showing";

function saveName(text) {
    localStorage.setItem(USER_LS, text);
}

function handleSubmit() {
    event.preventDefault();
    const currentValue = input.value;
    greetUser(currentValue);
    saveName(currentValue);
}

function askForName() {
    form.classList.add(SHOWING_CN);
    form.addEventListener("submit", handleSubmit);
}

function greetUser(text) {
    form.classList.remove(SHOWING_CN);
    greeting.classList.add(SHOWING_CN);
    greeting.innerText = `Hello, ${text}`;
}

function loadName() {
    const currentUser = localStorage.getItem(USER_LS);
    if (currentUser === null) {
        askForName();
    } else {
        greetUser(currentUser);
    }
}

function init() {
    loadName();
}

index.css

.form,
.greetings {
    display: none;
}

.showing {
    display: block;
}

index.html

<!DOCTYPE html>
<html lang = "en">

<head>
    <meta charset = "UTF-8">
    <title>Something</title>
    <link rel = "stylesheet" href = "index.css" />
</head>

<body>
    <div class = "js-clock">
        <h1>00:00</h1>
    </div>

    <form class = "js-form form">
        <input type = "text" placeholder = "What is your name?" />
    </form>

    <h4 class = "js-greetings greetings"></h4>
    <script src = "clock.js"></script>
    <script src = "greetings.js"></script>
</body>

</html>

javascript html css

10.04.2019 23:08

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Возникла проблема с запуском вашей функции loadName(). Это вызывалось из init(), но ничто не вызывало init(). Я изменил его, чтобы вызвать loadName() после загрузки окна. Также была проблема с получением константы USER_LS из локального хранилища, когда она еще не была установлена. Я только что сослался на него напрямую, поскольку он определен глобально. Я продемонстрировал, что для USER_LS установлено имя, а также значение null (это закомментировано, поскольку константа может быть определена только один раз), чтобы показать, как отображаются входные данные для каждого сценария:

const form = document.querySelector(".js-form");
const input = form.querySelector("input");
const greeting = document.querySelector(".js-greetings");
// const USER_LS = null;
const USER_LS = "Bob";
const SHOWING_CN = "showing";

function saveName(text) {
  localStorage.setItem(USER_LS, text);
}

function handleSubmit() {
  event.preventDefault();
  const currentValue = input.value;
  greetUser(currentValue);
  saveName(currentValue);
}

function askForName() {
  form.classList.add(SHOWING_CN);
  form.addEventListener("submit", handleSubmit);
}

function greetUser(text) {
  form.classList.remove(SHOWING_CN);
  greeting.classList.add(SHOWING_CN);
  greeting.innerText = `Hello, ${text}`;
}

function loadName() {
  const currentUser = USER_LS;
  if (currentUser === null) {
    askForName();
  } else {
    greetUser(currentUser);
  }
}

window.load = loadName();

.form,
.greetings {
  display: none;
}

.showing {
  display: block;
}

<div class = "js-clock">
  <h1>00:00</h1>
</div>

<form class = "js-form form">
  <input type = "text" placeholder = "What is your name?" />
</form>

<h4 class = "js-greetings greetings"></h4>
<script src = "clock.js"></script>
<script src = "greetings.js"></script>

Большое вам спасибо за вашу помощь! Я знал, что это была какая-то глупая ошибка. Спасибо, что расширили его и сделали лучше.

— 11.04.2019 00:58

10.04.2019 23:29