I’m working on a chatbot where users can talk to the chatbot and
I would like to have the conversation logged into a text file. I was thinking grabbing the <div class="msg-text">, which represent the conversation the document.getElementByClass("msg-text")[0].innerText; which is the chatbot’s response and the document.getElementByClass("msg-text")[1].innerText; which is the user’s response and have it to be read into a file.
The chatbot response in even numbers (0,2,4,6,8, etc.) and the odd number (1,3,5,7,9, etc.) is the user’s response.
Is there a more efficient way to grab the elements and have them written to a file? At this moment I get nothing in my file.
// This function finds odd/even and write to file
function findTheOddOnes_ToFile() {
var fso = new ActiveXObject("Scripting.FileSystemObject"),
thefile = fso.CreateTextFile("/Desktop/even.txt", True);
// find odd/even numbers in element
for (var i=0;i => document.getElementsByClassName("msg-text").length;i++) {
if ( i % 2 == 0) {
//If even add the chatbots respons to file. Chatbot respons are even numbes (0,2,4,6,etc)
//write to file
thefile.writeline("chatbot: " + document.getElementsByClassName("msg-text")[i].textContent + "<br>");
}
else{
//if Odd write to file as users respons (1,3,5,7,etc)
//write to file
thefile.writeline("You: : " + document.getElementsByClassName("msg-text")[i].textContent);
}
}
}<body>
<!-- partial:index.partial.html -->
<section class="msger">
<header class="msger-header">
<div class="msger-header-title">
<i class="fas fa-bug"></i> SE Chatbot <i class="fas fa-bug"></i>
</div>
</header>
<main class="msger-chat">
<div class="msg left-msg">
<div class="msg-img" style="background-image: url(https://image.flaticon.com/icons/svg/327/327779.svg)"></div>
<div class="msg-bubble">
<div class="msg-info">
<div class="msg-info-name">SEBot_real</div>
<div class="msg-info-time">12:45</div>
</div>
<div class="msg-text">
Hi, welcome to SE-Bot! Go ahead and send me a message.
</div>
</div>
Advertisement
Answer
Yeah, don’t call document.getElementsByClassName() multiple times. Also, what happens if the user types in something twice before the chatbot responds?
I would recommend you add a msg-bubble-user and msg-bubble-bot to your .msg-bubble element. Then loop through them, recording the transcript according to the class name, not the position:
document.querySelector(".msg-bubble").forEach(el=>{
const speaker = el.matches(".msg-bubble-user") ? "You" : "Chatbot";
const content = el.querySelector(".msg-text").textContent;
thefile.writeline(`${speaker}: ${content}<br />`);
});
^untested
If your file is empty, add a console.log() call to see if you’re getting the text you’re expecting.