Javascript 如何使用单个js创建或加载聊天应用程序UI？_Javascript_Html_User Interface_Web Applications_Chat

Javascript 如何使用单个js创建或加载聊天应用程序UI？

javascript html user-interface web-applications

Javascript 如何使用单个js创建或加载聊天应用程序UI？,javascript,html,user-interface,web-applications,chat,Javascript,Html,User Interface,Web Applications,Chat,我正在开发弹出式聊天应用程序。后端应用程序已准备就绪。应用程序包含一个html文件，另一个用于js和css 我想做一个单一的js文件来结合上述应用程序。每当我在feature中自动加载这个新的js文件时，这个弹出式聊天就必须工作所以请建议我，如何实现它 html代码： <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <me

我正在开发弹出式聊天应用程序。后端应用程序已准备就绪。应用程序包含一个html文件，另一个用于js和css

我想做一个单一的js文件来结合上述应用程序。每当我在feature中自动加载这个新的js文件时，这个弹出式聊天就必须工作

所以请建议我，如何实现它

html代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
    <title></title>
  </head>
  <body>
    <button class="open-button" onclick="openForm()">Chat</button>
    <div class="chat-popup" id="myForm">
  <form action="/action_page.php" class="form-container">
    <h1>Chat</h1>

    <label for="msg"><b>Message</b></label>
    <textarea placeholder="Type message.." name="msg" required></textarea>

    <button type="submit" class="btn">Send</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
  </form>
</div>
<script type="text/javascript" src="js/index.js"></script>
  </body>
</html>

最后，我想使用单个js文件加载这个“弹出式聊天窗口”。所以，我可以用它来制作。

@mindmaster纠正你的说法。如果希望在单个文件中合并数据源（JS部分）和UI部分（HTML），请使用ReactJS（）库。在ReactJS中使用JSX概念。我将留下您的解释！这比我的要好得多，这正是我的意思@kumaramalingam谢谢！好啊我知道反应的基本知识。但是，还有别的办法吗@库马拉马林加姆

function openForm() {
  document.getElementById("myForm").style.display = "block";
}

function closeForm() {
  document.getElementById("myForm").style.display = "none";
}