jQuery zu reinem JS

The_C

New member
Hallo,
hab einen kleines jQuery Ajax das so auch wunderbar funktioniert.
Da ich aber auf der Seite eigentlich kein jQuery Library brauche außer für den kleinen Code wollte ich fragen ob es möglich ist den jQuery Code in ein reines JS umzuwandeln.

Ich kann das leider nicht weil ich zu wenig von JS verstehe, wär das viel Aufwand den Code umzuwandeln könnte mir das irgendwer von euch hier zeigen?

Hier mal der jQuery Code:

PHP:
$('#modal').stop().on("click", function () {
    $('.modal-content').load("./newsletter-anmeldung.json", function (response, status, xhr) {
      if (status == "error") {
        let msg = "Do passt wos need!";
        alert(msg + " " + xhr.status + " " + xhr.statusText);
      } else {
        //alert("Passt alles");
      }
    });
  });

und hier mein kläglicher Versuch das in JS zu schreiben:

PHP:
let modal = document.querySelector('#modal');
let modalContent = document.querySelector('.modal-content');
let url = './newsletter-anmeldung.json';

modal.addEventListener('click'), () => {
  fetch(url)
    .then(res => res.json())
    .then(data => {
      console.log(data);
    })
}

  });

Wie ihr seht ich habe echt keinen Plan :confused:

- - - Aktualisiert - - -

Hab ich auch erledigt !
Hier der Code falls ihn jemand braucht

PHP:
document.getElementById('modal').addEventListener('click', loadText);

function loadText() {
  // mache ein HRX Objekt
  var xhr = new XMLHttpRequest();
  // öffnen - type, url/file, async
  xhr.open('GET', './newsletter-anmeldung.json', true);

  //console.log('READYSTAGE: ', xhr.readyState);

  //xhr.onprogress = function () {
  //  console.log('READYSTAGE: ', xhr.readyState);
  //}

  xhr.onload = function () {
    //console.log('READYSTAGE: ', xhr.readyState);
    if (this.status == 200) {
      document.getElementById('modalInput').innerHTML = this.responseText;
      console.log(this.responseText)
    } else if (this.status = 400) {
      document.getElementById('modalInput').innerHTML = 'Not Found';
    }
  }

  xhr.onerror = function () {
    console.log('Request Error...');
  }

  // Sends request
  xhr.send();
}
// HTTP Status
// 200: "OK"
// 403: "Forbidden"
// 404: "Not Found"
/*
 
Zuletzt bearbeitet:
Oben