write get.ElementByClass() from nested div to file

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);
       }
      }
}

JavaScript
​x
 
// 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>

JavaScript
 
<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>
                  

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 />`);
});

JavaScript
 
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.

Advertisement

Answer