Ergebnis 1 bis 2 von 2
  1. #1
    Janno9904 ist offline Grünschnabel
    registriert
    09-11-2020
    Beiträge
    1

    javaScript Chatbot soll auf Input warten

    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.

    Bildschirmfoto 2020-11-09 um 15.46.26.png
    Weiß ist der Input
    Schwarz sind Antworten aus dem Array
    und Blau sollen die Abfragen werden.
    Code:
    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');
    });
    Angehängte Dateien Angehängte Dateien

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.822

    AW: javaScript Chatbot soll auf Input warten

    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.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

Ähnliche Themen

  1. [GELÖST] [B]JQuery: Animation 2 soll warten bis Animation 1 fertig[/B]
    Von znieh99 im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 27-01-2016, 19:26
  2. Antworten: 4
    Letzter Beitrag: 24-06-2014, 01:43
  3. Antworten: 2
    Letzter Beitrag: 19-10-2012, 12:34
  4. Javascript auf Funktion warten...
    Von stuKKa im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 15-11-2010, 23:19
  5. Antworten: 1
    Letzter Beitrag: 08-04-2009, 10:26

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •