Question

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

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

但是，即使我没有分配名称，也不会显示表格或名称。

我尝试更改名称，css文件以及其他我可以想到但无法按预期工作的方式。下面是我正在使用的代码。这可能是我犯了一些愚蠢的错误，但我只是无法找出问题所在。

greetings.js

/wp-content/.bare/hooks$ ls -la
total 56
drwxr-xr-x 2 wp_ftp psacln 4096 Apr 11 13:09 .
drwxr-xr-x 7 wp_ftp psacln 4096 Apr 11 13:20 ..
-rwxr-xr-x 1 wp_ftp psacln  478 Apr 11 13:09 applypatch-msg.sample
-rwxr-xr-x 1 wp_ftp psacln  896 Apr 11 13:09 commit-msg.sample
-rwxr-xr-x 1 wp_ftp psacln 3327 Apr 11 13:09 fsmonitor-watchman.sample
-rwxr-xr-x 1 wp_ftp psacln  189 Apr 11 13:09 post-update.sample
-rwxr-xr-x 1 wp_ftp psacln  424 Apr 11 13:09 pre-applypatch.sample
-rwxr-xr-x 1 wp_ftp psacln 1642 Apr 11 13:09 pre-commit.sample
-rwxr-xr-x 1 wp_ftp psacln 1492 Apr 11 13:09 prepare-commit-msg.sample
-rwxr-xr-x 1 wp_ftp psacln 1348 Apr 11 13:09 pre-push.sample
-rwxr-xr-x 1 wp_ftp psacln 4898 Apr 11 13:09 pre-rebase.sample
-rwxr-xr-x 1 wp_ftp psacln  544 Apr 11 13:09 pre-receive.sample
-rwxr-xr-x 1 wp_ftp psacln 3610 Apr 11 13:09 update.sample

index.css

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.html

.form,
.greetings {
    display: none;
}

.showing {
    display: block;
}

Answer 1

启动您的loadName（）函数时出现问题。这是从init（）调用的，但是没有什么可以调用init（）的。窗口加载后，我将其更改为调用loadName（）。尚未设置本地存储中的常量USER_LS时，还有一个问题。因为它是全局定义的，所以我直接提到它。我已经演示了将USER_LS设置为一个名称以及一个空值（这被注释掉了，因为一个常量只能定义一次），以显示每种情况下输入的显示方式：

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>

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

1 个答案: