[FRAGE] javaScript Chatbot soll auf Input warten

[Janno9904]

Hallo zusammen,

Ich habe einen kleinen Chatbot gebaut, der aktuell schaut ob der Input zu einer Frage in einem PHP Array passt.
Wenn jedoch der Input 'Ich brauche eine Beratung' kommt soll er eine Funktion ausführen, die Jeweils eine Frage stellt, die Antwort in eine passende PHP Variable leitet und dann die nächste Frage stellt. Am ende will ich die PHP Variablen auswerten und dann ein passendes Produkt zurück geben.

Am Anfang wir Eine Antwort vom Bot gegeben, dann soll ein neues Div aufgemacht werden mit der 1. Frage, manchmal macht er das, manchmal ist es aber alles in einem DIV.

Auf die erste Frage soll nur mit Ja oder Nein geantwortet werden, jedoch springt er schon vorher wieder in die Hauptfunktion und prüft ja oder nein mit dem Array ab (was ja nicht klappt). Woran kann das liegen?

Ich weiß das es im Moment noch ziemlicher spagetti code ist, aber ich bin ja auch Anfänger.

Habe das gesamte Projekt als Zip in den Angang gepackt.


Weiß ist der Input
Schwarz sind Antworten aus dem Array
und Blau sollen die Abfragen werden.

const btnSend = document.getElementById('btn');
const chat = document.getElementById('chat');

const getMessage = (msg) => {
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      msg.toLowerCase();
      if (msg === 'ich brauche eine beratung') {
        beratung(msg);
      } else {

        const response = xhr.responseText;
        const chatBody = document.querySelector('.scroller');
        const divCpu = document.createElement('div');
        divCpu.className = 'eve visible'; //CSS von Bot
        divCpu.innerHTML = response;
        const divUser = document.createElement('div');
        divUser.className = 'me visible'; //CSS from User
        divUser.textContent = msg;
        chatBody.append(divUser);
        setTimeout(() => {
          chatBody.append(divCpu);
        }, 600);
      }
    }
  };

  xhr.open('GET', 'bot/chat.php?msg=' + msg, true); //PHP Aufruf
  xhr.send();
};

function beratung(msg)
{
  const divBerater = document.createElement('div');
  let divFrageAlter = document.createElement('div');
  divBerater.className = 'berater visible';
  divBerater.innerHTML = 'Ich werde Ihnen ein paar Fragen stellen und dann ' +
  'den passenden Tarif zeigen:';
  divFrageAlter.className = 'berater visible';
  divFrageAlter.innerHTML = 'Sind sie jünger als 28 Jahre? ( Ja | Nein)';
  const chatBody = document.querySelector('.scroller');
  const divUser = document.createElement('div');
  divUser.className = 'me visible'; //CSS from User
  divUser.textContent = msg;
  chatBody.append(divUser);
  setTimeout(() => {
    chatBody.append(divBerater);
  }, 600);
  setTimeout(() => {
    chatBody.append(divFrageAlter);
  }, 4000);

  const getAge = (msg) => {
    const age = new XMLHttpRequest();
    age.onreadystatechange = function () {
      if (age.readyState == 4 && age.status == 200) {
        msg.toLowerCase();
        if (msg === 'ja') {
          data(msg);
        } else if (msg === 'nein') {
          business(msg);
        } else {
          chatBody.append(divFrageAlter = 'Fehlerhafte Eingabe. ' +
          'Wählen sie ( Ja | Nein)');
        }
      }

    };
  };
}

function business(msg) {
  const divBerater = document.createElement('div');
  divBerater.className = 'berater visible';
  divBerater.innerHTML = 'Sind Sie Selbstständig? ( Ja | Nein )';
  const chatBody = document.querySelector('.scroller');
  const divUser = document.createElement('div');
  divUser.className = 'me visible'; //CSS from User
  divUser.textContent = msg;
  chatBody.append(divUser);
  setTimeout(() =>
  {
    chatBody.append(divBerater);
  }, 600);
  setTimeout(() =>
  {
    chatBody.append(divFrageAlter);
  }, 2000);
}

//Senden
btnSend.addEventListener('click', (e) => { //Auf Event Klick warten
  e.preventDefault();
  if (chat.value == '') {
  } else {
    getMessage(chat.value);
    chat.value = '';

  }

});

//Popup
const popup = document.querySelector('.container');
const chatBtn = document.querySelector('.popup-btn');

chatBtn.addEventListener('click', ()=> {
  popup.classList.toggle('show');
});

 

[mikdoe]

Hi!

Es ist relativ unwahrscheinlich, dass sich jemand das ZIP lädt, installiert und für dich debugt. Dafür ist ein Forum nicht das optimalste Medium. Du könntest dir selbst helfen und zunächst den Code auf die fragliche Stelle reduzieren, indem du alles raus wirfst, was mit dem Fehler nichts zu tun hat wie z. B. CSS Zeugs.

Dann Kontrollausgaben mit console.log('Text') vorn, Mitte, hinten einbauen (Konsole im Browser mit F12 öffnen) und schauen, in welcher der beiden Hälften das Problem auftritt. Dann in dieser Hälfte wieder Kontrollausgaben vorn, Mitte, hinten und die betreffende Hälfte eingrenzen. Und so immer weiter den Bereich eingrenzen durch immer wieder aufteilen in immer kleinere Abschnitte. So kommt man dem Problem schnell näher und kann es i. d. R. selbst lösen.