聊天机器人弹出窗口在我点击按钮时未出现。

huangapple
go评论111阅读模式
英文:

Chat-bot Pop Up not appearing when I click on Button

问题

以下是您提供的JavaScript代码的中文翻译部分：

  1. class Chatbox {
  2.   constructor() {
  3.     this.args = {
  4.       openButton: document.querySelector(".chatbox__button"),
  5.       sendButton: document.querySelector(".send__button"),
  6.     };
  8.     this.state = false;
  9.     this.messages = [];
  10.   }
  12.   toggleState(chatBox) {
  13.     chatBox.classList.toggle("chatbox--active");
  14.   }
  16.   onSendButton(chatBox) {
  17.     var textField = chatBox.querySelector("input");
  18.     let text1 = textField.value;
  19.     if (text1 === "") {
  20.       return;
  21.     }
  23.     let msg1 = { name: "User", message: text1 };
  24.     this.messages.push(msg1);
  26.     fetch($SCRIPT_ROOT + "/predict", {
  27.       method: "POST",
  28.       body: JSON.stringify({ message: text1 }),
  29.       mode: "cors",
  30.       headers: {
  31.         "Content-Type": "application/json",
  32.       },
  33.     })
  34.       .then((r) => r.json())
  35.       .then((r) => {
  36.         let msg2 = { name: "Sam", message: r.answer };
  37.         this.messages.push(msg2);
  38.         this.updateChatText(chatBox);
  39.         textField.value = "";
  40.       })
  41.       .catch((error) => {
  42.         console.error("Error:", error);
  43.         this.updateChatText(chatBox);
  44.         textField.value = "";
  45.       });
  46.   }
  48.   updateChatText(chatBox) {
  49.     var html = "";
  50.     this.messages
  51.       .slice()
  52.       .reverse()
  53.       .forEach(function (item, index) {
  54.         if (item.name === "Sam") {
  55.           html +=
  56.             '<div class="messages__item messages__item--visitor">' +
  57.             item.message +
  58.             "</div>";
  59.         } else {
  60.           html +=
  61.             '<div class="messages__item messages__item--operator">' +
  62.             item.message +
  63.             "</div>";
  64.         }
  65.       });
  67.     const chatMessage = chatBox.querySelector(".chatbox__messages");
  68.     chatMessage.innerHTML = html;
  69.   }
  71.   display() {
  72.     const { openButton, sendButton } = this.args;
  73.     const chatBox = document.querySelector(".chatbox");
  75.     openButton.addEventListener("click", () => this.toggleState(chatBox));
  77.     sendButton.addEventListener("click", () => this.onSendButton(chatBox));
  79.     const inputNode = chatBox.querySelector("input");
  80.     inputNode.addEventListener("keyup", (event) => {
  81.       if (event.key === "Enter") {
  82.         this.onSendButton(chatBox);
  83.       }
  84.     });
  85.   }
  86. }
  88. const chatbox = new Chatbox();
  89. chatbox.display();

希望这有助于您解决聊天框在按钮点击时不显示的问题。如果您需要更多帮助，请告诉我。

英文:

I am currently following a YouTube tutorial on how to build a chatbot using Python and JavaScript. I have managed to implement the chat button on my website, but when I click it, the chatbot pop-up does not appear as expected.

I have provided the relevant code below, here is app.js:

  1. class Chatbox {
  2. constructor() {
  3. this.args = {
  4. openButton: document.querySelector(&quot;.chatbox__button&quot;),
  5. sendButton: document.querySelector(&quot;.send__button&quot;),
  6. };
  7. this.state = false;
  8. this.messages = [];
  9. }
  10. toggleState(chatBox) {
  11. chatBox.classList.toggle(&quot;chatbox--active&quot;);
  12. }
  13. onSendButton(chatBox) {
  14. var textField = chatBox.querySelector(&quot;input&quot;);
  15. let text1 = textField.value;
  16. if (text1 === &quot;&quot;) {
  17. return;
  18. }
  19. let msg1 = { name: &quot;User&quot;, message: text1 };
  20. this.messages.push(msg1);
  21. fetch($SCRIPT_ROOT + &quot;/predict&quot;, {
  22. method: &quot;POST&quot;,
  23. body: JSON.stringify({ message: text1 }),
  24. mode: &quot;cors&quot;,
  25. headers: {
  26. &quot;Content-Type&quot;: &quot;application/json&quot;,
  27. },
  28. })
  29. .then((r) =&gt; r.json())
  30. .then((r) =&gt; {
  31. let msg2 = { name: &quot;Sam&quot;, message: r.answer };
  32. this.messages.push(msg2);
  33. this.updateChatText(chatBox);
  34. textField.value = &quot;&quot;;
  35. })
  36. .catch((error) =&gt; {
  37. console.error(&quot;Error:&quot;, error);
  38. this.updateChatText(chatBox);
  39. textField.value = &quot;&quot;;
  40. });
  41. }
  42. updateChatText(chatBox) {
  43. var html = &quot;&quot;;
  44. this.messages
  45. .slice()
  46. .reverse()
  47. .forEach(function (item, index) {
  48. if (item.name === &quot;Sam&quot;) {
  49. html +=
  50. &#39;&lt;div class=&quot;messages__item messages__item--visitor&quot;&gt;&#39; +
  51. item.message +
  52. &quot;&lt;/div&gt;&quot;;
  53. } else {
  54. html +=
  55. &#39;&lt;div class=&quot;messages__item messages__item--operator&quot;&gt;&#39; +
  56. item.message +
  57. &quot;&lt;/div&gt;&quot;;
  58. }
  59. });
  60. const chatMessage = chatBox.querySelector(&quot;.chatbox__messages&quot;);
  61. chatMessage.innerHTML = html;
  62. }
  63. display() {
  64. const { openButton, sendButton } = this.args;
  65. const chatBox = document.querySelector(&quot;.chatbox&quot;);
  66. openButton.addEventListener(&quot;click&quot;, () =&gt; this.toggleState(chatBox));
  67. sendButton.addEventListener(&quot;click&quot;, () =&gt; this.onSendButton(chatBox));
  68. const inputNode = chatBox.querySelector(&quot;input&quot;);
  69. inputNode.addEventListener(&quot;keyup&quot;, (event) =&gt; {
  70. if (event.key === &quot;Enter&quot;) {
  71. this.onSendButton(chatBox);
  72. }
  73. });
  74. }
  75. }
  76. const chatbox = new Chatbox();
  77. chatbox.display();

The display() method is responsible for attaching event listeners to the chat button and handling the chatbox toggle functionality. However, when I click the button, nothing happens.

Here is an image of my website:

Here is my html code base for 'base.html':

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;link rel=&quot;stylesheet&quot; href=&quot;{{ url_for(&#39;static&#39;, filename=&#39;style.css&#39;) }}&quot;&gt;
  4. &lt;head&gt;
  5. &lt;meta charset=&quot;UTF-8&quot;&gt;
  6. &lt;title&gt;Chatbot&lt;/title&gt;
  7. &lt;/head&gt;
  8. &lt;body&gt;
  9. &lt;div class=&quot;container&quot;&gt;
  10. &lt;div class=&quot;chatbox&quot;&gt;
  11. &lt;div class=&quot;chatbox__support&quot;&gt;
  12. &lt;div class=&quot;chatbox__header&quot;&gt;
  13. &lt;div class=&quot;chatbox__image--header&quot;&gt;
  14. &lt;img src=&quot;https://img.icons8.com/color/48/000000/circled-user-female-skin-type-5--v1.png&quot; alt=&quot;image&quot;&gt;
  15. &lt;/div&gt;
  16. &lt;div class=&quot;chatbox__content--header&quot;&gt;
  17. &lt;h4 class=&quot;chatbox__heading--header&quot;&gt;Chat support&lt;/h4&gt;
  18. &lt;p class=&quot;chatbox__description--header&quot;&gt;Hi. My name is Sam. How can I help you?&lt;/p&gt;
  19. &lt;/div&gt;
  20. &lt;/div&gt;
  21. &lt;div class=&quot;chatbox__messages&quot;&gt;
  22. &lt;div&gt;&lt;/div&gt;
  23. &lt;/div&gt;
  24. &lt;div class=&quot;chatbox__footer&quot;&gt;
  25. &lt;input type=&quot;text&quot; placeholder=&quot;Write a message...&quot;&gt;
  26. &lt;button class=&quot;chatbox__send--footer send__button&quot;&gt;Send&lt;/button&gt;
  27. &lt;/div&gt;
  28. &lt;/div&gt;
  29. &lt;div class=&quot;chatbox__button&quot;&gt;
  30. &lt;button&gt;&lt;img src=&quot;{{ url_for(&#39;static&#39;, filename=&#39;images/chatbox-icon.svg&#39;) }}&quot; /&gt;&lt;/button&gt;
  31. &lt;/div&gt;
  32. &lt;/div&gt;
  33. &lt;/div&gt;
  34. &lt;script&gt;
  35. var $SCRIPT_ROOT = &quot;{{ request.script_root|tojson }}&quot;;
  36. &lt;/script&gt;
  37. &lt;script type=&quot;text/javascript&quot; src=&quot;{{ url_for(&#39;static&#39;, filename=&#39;app.js&#39;) }}&quot;&gt;&lt;/script&gt;
  38. &lt;/body&gt;
  39. &lt;/html&gt;
  40. and here is my css code base for style.css:
  41. * {
  42. box-sizing: border-box;
  43. margin: 0;
  44. padding: 0;
  45. }
  46. body {
  47. font-family: &#39;Nunito&#39;, sans-serif;
  48. font-weight: 400;
  49. font-size: 100%;
  50. background: #F1F1F1;
  51. }
  52. *, html {
  53. --primaryGradient: linear-gradient(93.12deg, #581B98 0.52%, #9C1DE7 100%);
  54. --secondaryGradient: linear-gradient(268.91deg, #581B98 -2.14%, #9C1DE7 99.69%);
  55. --primaryBoxShadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
  56. --secondaryBoxShadow: 0px -10px 15px rgba(0, 0, 0, 0.1);
  57. --primary: #581B98;
  58. }
  59. /* CHATBOX
  60. =============== */
  61. .chatbox {
  62. position: absolute;
  63. bottom: 30px;
  64. right: 30px;
  65. }
  66. /* CONTENT IS CLOSE */
  67. .chatbox__support {
  68. display: flex;
  69. flex-direction: column;
  70. background: #eee;
  71. width: 300px;
  72. height: 350px;
  73. z-index: -123456;
  74. opacity: 0;
  75. transition: all .5s ease-in-out;
  76. }
  77. /* CONTENT ISOPEN */
  78. .chatbox--active {
  79. transform: translateY(-40px);
  80. z-index: 123456;
  81. opacity: 1;
  82. }
  83. /* BUTTON */
  84. .chatbox__button {
  85. text-align: right;
  86. }
  87. .send__button {
  88. padding: 6px;
  89. background: transparent;
  90. border: none;
  91. outline: none;
  92. cursor: pointer;
  93. }
  94. /* HEADER */
  95. .chatbox__header {
  96. position: sticky;
  97. top: 0;
  98. background: orange;
  99. }
  100. /* MESSAGES */
  101. .chatbox__messages {
  102. margin-top: auto;
  103. display: flex;
  104. overflow-y: scroll;
  105. flex-direction: column-reverse;
  106. }
  107. .messages__item {
  108. background: orange;
  109. max-width: 60.6%;
  110. width: fit-content;
  111. }
  112. .messages__item--operator {
  113. margin-left: auto;
  114. }
  115. .messages__item--visitor {
  116. margin-right: auto;
  117. }
  118. /* FOOTER */
  119. .chatbox__footer {
  120. position: sticky;
  121. bottom: 0;
  122. }
  123. .chatbox__support {
  124. background: #f9f9f9;
  125. height: 450px;
  126. width: 350px;
  127. box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  128. border-top-left-radius: 20px;
  129. border-top-right-radius: 20px;
  130. }
  131. /* HEADER */
  132. .chatbox__header {
  133. background: var(--primaryGradient);
  134. display: flex;
  135. flex-direction: row;
  136. align-items: center;
  137. justify-content: center;
  138. padding: 15px 20px;
  139. border-top-left-radius: 20px;
  140. border-top-right-radius: 20px;
  141. box-shadow: var(--primaryBoxShadow);
  142. }
  143. .chatbox__image--header {
  144. margin-right: 10px;
  145. }
  146. .chatbox__heading--header {
  147. font-size: 1.2rem;
  148. color: white;
  149. }
  150. .chatbox__description--header {
  151. font-size: .9rem;
  152. color: white;
  153. }
  154. /* Messages */
  155. .chatbox__messages {
  156. padding: 0 20px;
  157. }
  158. .messages__item {
  159. margin-top: 10px;
  160. background: #E0E0E0;
  161. padding: 8px 12px;
  162. max-width: 70%;
  163. }
  164. .messages__item--visitor,
  165. .messages__item--typing {
  166. border-top-left-radius: 20px;
  167. border-top-right-radius: 20px;
  168. border-bottom-right-radius: 20px;
  169. }
  170. .messages__item--operator {
  171. border-top-left-radius: 20px;
  172. border-top-right-radius: 20px;
  173. border-bottom-left-radius: 20px;
  174. background: var(--primary);
  175. color: white;
  176. }
  177. /* FOOTER */
  178. .chatbox__footer {
  179. display: flex;
  180. flex-direction: row;
  181. align-items: center;
  182. justify-content: space-between;
  183. padding: 20px 20px;
  184. background: var(--secondaryGradient);
  185. box-shadow: var(--secondaryBoxShadow);
  186. border-bottom-right-radius: 10px;
  187. border-bottom-left-radius: 10px;
  188. margin-top: 20px;
  189. }
  190. .chatbox__footer input {
  191. width: 80%;
  192. border: none;
  193. padding: 10px 10px;
  194. border-radius: 30px;
  195. text-align: left;
  196. }
  197. .chatbox__send--footer {
  198. color: white;
  199. }
  200. .chatbox__button button,
  201. .chatbox__button button:focus,
  202. .chatbox__button button:visited {
  203. padding: 10px;
  204. background: white;
  205. border: none;
  206. outline: none;
  207. border-top-left-radius: 50px;
  208. border-top-right-radius: 50px;
  209. border-bottom-left-radius: 50px;
  210. box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
  211. cursor: pointer;
  212. }

I would appreciate any insights or suggestions on why the chatbot pop-up is not appearing when the button is clicked. Thank you!

答案1

得分: 0

在display()方法内部，

尝试将A更改为B

A

  1. const chatBox = document.querySelector(".chatbox");

B

  1. const chatBox = document.querySelector(".chatbox__support");
英文:

Within display() method,

try changing A to B

A

  1. const chatBox = document.querySelector(&quot;.chatbox&quot;);

B

  1. const chatBox = document.querySelector(&quot;.chatbox__support&quot;);

huangapple
  • 本文由 发表于 2023年6月26日 08:38:06
  • 转载请务必保留本文链接：https://go.coder-hub.com/76552930.html
  • bots
  • chatbot
  • css
  • html
  • python
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定