參考codapen下來做聊天室，可是跑不動為什麼?

chat html css jquery

alanotmt 2023-05-11 18:06:52 ‧ 2096 瀏覽

分享至

我code都照codapen這位大神寫的一樣:
https://codepen.io/supah/pen/jqOBqp

我只是按照他給的code寫，但聊天室就沒反應。
html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chat Room</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.min.css"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="jq.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.concat.min.js"></script>



  </head>
  <body>
    <div class="chat">
      <div class="chat-title">
        <h1>chat</h1>
        <h2>message</h2>
        <figure class="avatar">
          <img
            src="https://beebom.com/wp-content/uploads/2022/12/cool-things-do-with-chatgpt-featured.jpg"
          />
        </figure>
      </div>
      <div class="messages">
        <div class="messages-content"></div>
      </div>
      <div class="message-box">
        <textarea
          type="text"
          class="message-input"
          placeholder="Type message..."
        ></textarea>
        <button type="submit" class="message-submit">Send</button>
      </div>
    </div>
    <div class="bg"></div>
  </body>
</html>

css與js 就不給了，因為就跟codepen大神的一樣照貼，
唯一有可能有變動的就是html，所以再請教一下各位。

看更多先前的討論...收起先前的討論...

win895564 iT邦研究生 5 級 ‧ 2023-05-11 18:22:40 檢舉

看看是不是引入的路徑問題

小哈片刻 iT邦研究生 4 級 ‧ 2023-05-11 21:52:59 檢舉

可能還要看看你的網頁是放在哪

alanotmt iT邦新手 4 級 ‧ 2023-05-11 22:06:39 檢舉

我是用xampp的apache，跟style / js都放同一個資料夾，畫面都正常，但就不能像codepen一樣有反應

japhenchen iT邦超人 1 級 ‧ 2023-05-12 08:51:41 檢舉

js端有在運作 setTimeout 或 setInterval 嗎？

player iT邦大師 1 級 ‧ 2023-05-16 18:20:03 檢舉

聊天室要接Server端吧?
還是你是要做一個假的本機Demo？
且絕大多數的虛擬主機
都不給架聊天室的

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

hokou

iT邦好手 1 級 ‧ 2023-05-12 08:44:23

最佳解答

我推測 jq.js 是那個 JS 檔案
把它移到 body 底部
因為 JS 放上面抓不到後來產生的 DOM

  <script src="jq.js"></script>
</body>

回應 3
分享
檢舉

alanotmt iT邦新手 4 級 ‧ 2023-05-12 09:29:55 檢舉

感謝!!! 一點就中!

GGU.IN iT邦新手 4 級 ‧ 2023-05-12 09:40:27 檢舉

牛皮

shiaobin iT邦新手 4 級 ‧ 2023-05-17 15:07:01 檢舉

補充說明，除了移到 body 底部以外，也可以加上 defer ，這樣就不用移到 body 底部了。

還有一個問題是 jquery.min.js 的網址前面要加上 https:。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="jq.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.concat.min.js"></script>

登入發表回應