JS20min Day — 16 設置內容 (text, html) 登入流程範例

Whien

7 min readJul 11, 2017

（使用者登入）
「Login….」
（使用者等待..）
「嗨！XXX」

你一定見過這樣的狀態吧，現在大多數網站，為了減少使用者的等待與懷疑，都會利用改變內容來通知使用者目前的狀態，好讓使用者可以乖乖的等待頁面完成，如何呈現這樣子的效果呢？讓我們今天來一探究竟。

取得元素內容（文）

如何查看內容呢？來看看 JavaScript 原生方法與 jQuery 查看的方式

JavaScript 原生方法

innerText
innerHTML

innerText

直接使用 elem.innerText 方法就可以直接取得內文

<body>
  <div id='title'>Hello, JS 20 Min<div>
  <script>
    let title = document.getElementById('title')
    console.log(title.innerText)
  </script>
</body>

上面結果會得到 Hello, JS 20 Min 字串

innerHTML

直接使用 elem.innerHTML 方法可以取得完整元素內容包含網頁標籤語法

<body>
  <div id='title'><p>Hello, JS 20 Min</p><div>
  <script>
    let title = document.getElementById('title')
    console.log(title.innerHTML)
  </script>
</body>

結果會得到 <p>Hello, JS 20 Min</p>

jQuery 方法

text()
html()

首先要記得引入 jQuery 函式庫

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

text()

<body>
  <div id='title'>Hello, JS 20 Min<div>
  <script>
    let title = $('#title')
    console.log(title.text())
  </script>
</body>

html()

<body>
  <div id='title'><p>Hello, JS 20 Min</p><div>
  <script>
    let title = $('#title')
    console.log(title.html())
  </script>
</body>

基本上內容是一樣的，只是用 jQuery 可以替我們省下不少打字的量。

改變元素內容

有幾種方法可以改變元素內容，我們來看看如何用 JavaScript 原生的方法與 jQuery 來改變

JavaScript 原生方法

innerText 並賦予值
innerHTML 並賦予值

innerText

使用 innerText 並且賦予一段內容會插入「純文字」的內容

<body>
  <div id='title'><div>
  <script>
    let title = document.getElementById('title')
    title.innerText = '<div>Hello, JS 20 Min</div>'
  </script>
</body>

結果會得到網頁上看見 <div>Hello, JS 20 Min</div> 完整字串

innerHTML

使用 innerHTML 並且賦予一段內容會將文字包含網頁完整標籤語法套用進去

<body>
  <div id='title'><div>
  <script>
    let title = document.getElementById('title')
    title.innerHTML = '<div>Hello, JS 20 Min</div>'
  </script>
</body>

結果會發現原本的<div>元素中會再多一個<div>元素，網頁上只顯示 Hello, JS 20 Min

jQuery 方法

text(純字串內容)
html(可包含網頁標籤語法)

text(純字串內容)

<body>
  <div id='title'><div>
  <script>
    let title = $('#title')
    title.text('Hello, JS 20 Min')
  </script>
</body>

html(可包含網頁標籤語法)

<body>
  <div id='title'><div>
  <script>
    let title = $('#title')
    title.html('<div>Hello, JS 20 Min</div>')
  </script>
</body>

基本上也是大同小異，減少輸入的文字量，並且也可以利用 jQuery 繼續做後續的操作。

最後來做一個小範例，一個使用者登入的流程

使用者可以輸入帳號密碼 s123456, 123456
使用者點擊登入
點擊後開始尋找帳號密碼是否正確（用兩秒等待）
如果成功則登入成功並顯示（Hi, welcome JS 20 Min）
如果登入失敗則顯示（請檢查帳號密碼是否正確）

index.html

<html>
<head>
 <title></title>
</head>
<body>
 <div id='result'>請登入</div>
 <div>
  帳號: <input id='account' type='text' />
 </div>
 <div>
  密碼: <input id='password' type='password' />
 </div>
 <div>
  <button id='login'>登入</button>
 </div>
 <script src='./main.js'></script>
</body>
</html>

main.js

const loginButton = document.getElementById('login')
const accountInput = document.getElementById('account')
const passwordInput = document.getElementById('password')
const resultOutput = document.getElementById('result')function login() {
 resultOutput.style.color = '#00f'
 resultOutput.innerText = 'Login..'
 setTimeout(function() {
  const accountValue = accountInput.value
    passwordValue = passwordInput.value
  if (accountValue === 's123456' &&
    passwordValue === '123456') {
   resultOutput.style.color = '#0f0'
   resultOutput.innerText = 'Hi, welcome JS 20 Min'
  } else {
   resultOutput.style.color = '#f00'
   resultOutput.innerText = '請檢查帳號密碼是否正確'
  }
 }, 2000)
}loginButton.addEventListener('click', login)