时间戳

首页 > 解决方案 > 通过js添加和删除表单不起作用

javascript - 通过js添加和删除表单不起作用

问题描述

我是一个尝试学习 JavaScript 的新手。因此，我正在尝试克隆一个名为 Momentum 的应用程序，并且在添加和删除用户的表单和名称时遇到了问题。

从 loadName() 函数中可以看出，如果有名字，它应该激活 greetUser() 函数以从表单中删除“显示”类并将“显示”添加到问候类列表中。如果没有名字，它应该显示一个表单，用户可以在其中输入他们的名字。

但是，无论我是否指定名称，表单都不会显示，名称也不会显示。

我尝试更改名称、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();
}

索引.css

.form,
.greetings {
    display: none;
}

.showing {
    display: block;
}

索引.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>

标签： javascripthtmlcss

解决方案

启动 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>

推荐阅读