我有一个基于 Javascript 创建的 HTML 聊天框。现在我正在尝试将 Javascript 代码转换为 Pyscript，以更好地简化数据分析工具。然而，翻译后，聊天框无法正常工作。我已经发布了 Pyscript 和 Javascript 版本的代码进行比较。
你能告诉我 Pyscript 代码有什么问题吗？谢谢。
带有基于pyscript的聊天框的.html文件（即翻译后的代码）如下。单击“发送”按钮后，没有任何反应。它应该在一行中显示问题，在下一行中显示答案。
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <!-- PyScript CSS and JS --> <link rel="stylesheet" href="https://pyscript.net/releases/2024.1.3/core.css"/> <script type="module" src="https://pyscript.net/releases/2024.1.3/core.js"></script> </head> <body> <div id="contents"> <div class="post"> <br><br><br><br> <p> Post your question here. The answer will be returned in the next row. <div id="chatbox"> <div id="messages"></div> <input type="text" id="userInput" placeholder="Type a message..."> <button id="sendButton">Send</button> </div> <py-script> from js import document def send_message(event): input_element = document.getElementById("userInput") message = input_element.value.trim() if message: messages_container = document.getElementById("messages") new_message = document.createElement("div") new_message.textContent = message messages_container.appendChild(new_message) input_element.value = "" # Clear input field messages_container.scrollTop = messages_container.scrollHeight # Scroll to the bottom # Simulated response response = document.createElement("div") response.textContent = "The response should be displayed here." messages_container.appendChild(response) messages_container.scrollTop = messages_container.scrollHeight # Scroll to the bottom again send_button = document.getElementById("sendButton") send_button.addEventListener("click", send_message) </py-script> </p> </div> </div> </body> </html>
Javascript 版本的代码运行良好。代码如下。
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> </head> <body> <div id="contents"> <div class="post"> <br><br><br><br> <p> Post your question here. The answer will be returned in the next row. <div id="chatbox"> <div id="messages"></div> <input type="text" id="userInput" placeholder="Type a message..."> <button onclick="sendMessage()">Send</button> </div> <script> function sendMessage() { var input = document.getElementById("userInput"); var message = input.value.trim(); if (message !== "") { // Post question here. var messagesContainer = document.getElementById("messages"); var newMessage = document.createElement("div"); newMessage.textContent = message; messagesContainer.appendChild(newMessage); input.value = ""; // Clear input field messagesContainer.scrollTop = messagesContainer.scrollHeight; // Scroll to the bottom // Post anwer here. var newMessage = document.createElement("div"); newMessage.textContent = "The response should be displayed here."; messagesContainer.appendChild(newMessage); input.value = ""; // Clear input field messagesContainer.scrollTop = messagesContainer.scrollHeight; // Scroll to the bottom } } </script> </p> </div> </div> </body> </html>
从您提供的代码中，可以看出在转换为 Pyscript 之后，您似乎在 <py-script> 标签中执行了 Python 代码。然而，Pyscript 并不是用于在 HTML 中执行 Python 代码的工具，而是用于将 Python 代码转换为 JavaScript 代码的工具。
<py-script>
您需要确保您的 Python 代码被转换为 JavaScript 代码，并且在 HTML 中以正确的方式执行。以下是您应该执行的步骤：
以下是您的 HTML 文件应该如何修改：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <!-- 加载 Pyscript CSS 和 JS --> <link rel="stylesheet" href="https://pyscript.net/releases/2024.1.3/core.css"/> <script type="module" src="https://pyscript.net/releases/2024.1.3/core.js"></script> </head> <body> <div id="contents"> <div class="post"> <br><br><br><br> <p> Post your question here. The answer will be returned in the next row. <div id="chatbox"> <div id="messages"></div> <input type="text" id="userInput" placeholder="Type a message..."> <button id="sendButton">Send</button> </div> </p> </div> </div> <script> // 这里是您转换后的 JavaScript 代码 function send_message(event) { const input_element = document.getElementById("userInput"); const message = input_element.value.trim(); if (message) { const messages_container = document.getElementById("messages"); const new_message = document.createElement("div"); new_message.textContent = message; messages_container.appendChild(new_message); input_element.value = ""; // 清除输入字段 messages_container.scrollTop = messages_container.scrollHeight; // 滚动到底部 // 模拟响应 const response = document.createElement("div"); response.textContent = "The response should be displayed here."; messages_container.appendChild(response); messages_container.scrollTop = messages_container.scrollHeight; // 再次滚动到底部 } } const send_button = document.getElementById("sendButton"); send_button.addEventListener("click", send_message); </script> </body> </html>
请确保您的 Python 代码已正确转换为 JavaScript 代码，并且将其包含在 HTML 文件中以正确执行。同时，确保 JavaScript 代码与 HTML 结构正确交互，以确保聊天框在用户交互时正常工作。
