Day04：Set Chat Page(设定聊天页) I

在处理完输入使用者名称後，下一步，自然就是进入 Chat 的触发事件。

HTML

先处理结构

  <body>
    <main class="wrapper">
      <section class="enter-box">
        <input type="text" class="enter-input" placeholder="Create New Name" />
        <button type="button" class="enter-btn">Enter Chat</button>
      </section>
      <section class="chat-box display-none">
        <span class="username-label"></span>
        <div class="chat-container"></div>
      </section>
    </main>
  </body>

这两个 section 可以理解为两个 component，前者用来显示进入页面，後者则是聊天页面。另外，为了处理转换页面後的差异，添加简单的 CSS 来隐藏或显示内容。

.display-none {
  display: none;
}

.display-flex {
  display: flex;
}

Enter Button

当点击进入聊天室的按钮时，应该要触发两件事

使用者已输入名称，且不得为空
当前的进入页切换成聊天页

同样使用上一章写的 nameInput() 来进一步监听 click 事件。

nameInput.addEventListener('keyup', (e) => {
  store.setUserName(e.target.value);

  // validation can't be empty
  if (e.target.value) {
    chatBtn.addEventListener('click', () => {
      console.log('log');
    });
  }
});

先确认使用者是否有输入名称，若有，才允许往下走。

Go To Chat Page

接下来，透过操作 DOM 来替 section 之间增删改变 class，达到转换页面的目的。

touch ui.js

ui.js

// ui.js
const goToChat = () => {
  const enterPage = document.querySelector('.enter-box');
  const chatPage = document.querySelector('.chat-box');

  enterPage.classList.add('display-none');

  chatPage.classList.remove('display-none');
  chatPage.classList.add('display-flex');
};

除了切换页面外，也需要将刚刚输入的使用者名称显示出来，所以这时就要调用 store.js 中预存的 username，使用 getUserName()。再取得 username 之後，同样是操作 DOM 来进行显示，最後则是汇出，准备让 client.js 使用。

// ui.js
import store from './store.js';

const goToChat = () => {
  // ...
  const username = store.getUserName();
  updateUserName(username);
};

const updateUserName = (username) => {
  const usernameLabel = document.querySelector('.username-label');
  usernameLabel.innerHTML = username;
};

export default {
  goToChat,
};

回到 client.js，让 click 事件触发时，调用 goToChat()，进而达到我们的目的。

import ui from './ui.js';

// ...

nameInput.addEventListener('keyup', (e) => {
  // ...
  if (e.target.value) {
    chatBtn.addEventListener('click', () => {
      ui.goToChat();
    });
  }
});

<<: Day20 CSS预处理器是什麽?

>>: 30天打造品牌特色电商网站 Day.6 Figma实作第一个网站