iT邦幫忙

2022 iThome 鐵人賽

DAY 25
0
自我挑戰組

30天製作專題紀錄-虛擬女友系列 第 25

Day25 30天製作專題紀錄-UI功能

  • 分享至 

  • xImage
  •  

今天就要來實現輸入訊息的功能,
那我會直接貼程式碼再來一一介紹。

  let message = [];
  // 送出訊息的function
  function myFun() {
    // 從(textInput)抓取對話的內容
    var input = document.getElementById("textInput").value;
    // 如果是空值則回傳空值
    if (input == "") {
      return false;
    }
  }

要將輸入訊息呈現就要先將內容從網頁抓出來

  • document.getElementById
    我們在建架構時都會給特定的內容增加id,
    而這個的用法就是取頁面上特定id的元素值,
    這邊多補充一點,
    這功能會取得網頁中該 id 的第一個元素,
    但代表頁面有其他相同id的元素還是只會抓第一個,
    其他的相同id的元素值不會被抓取。

而後面會看到有 .value 這樣的寫法,
最後面那個 value 意思是我們要取得的是欄位 value。
然後再設一個判斷,
如果是空值就沒有任何動作。


上一篇
Day24 30天製作專題紀錄-UI功能
下一篇
Day26 30天製作專題紀錄-UI功能
系列文
30天製作專題紀錄-虛擬女友30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言