CODEWITHSUNDEEP
javascripthtmlgithub
Kris10an
Kris10an

Reputation: 559

Access github html file using JavaScript

I have this html file on github, which I want to access using JavaScript. I tried this, but it didn't work: (I'm using p5.js so the setup function is basically the onload function)

var htmlfile = "[URL THAT POINTS TO HTML FILE]";

function setup() {
    console.log(htmlfile.getElementById('id'))
}

Is there any way to do this? Preferably i would like that only plain JavaScript and p5 will be used.

Upvotes: 0

Views: 51

Answers (1)

Andrew L
Andrew L

Reputation: 5486

As said in the comments, sending a request to the raw github page will probably be the best way to get the html you want. Here is an example using fetch

document.addEventListener('DOMContentLoaded', getHTML);

function getHTML() {
  fetch('https://gist.githubusercontent.com/chrisvfritz/bc010e6ed25b802da7eb/raw/18eaa48addae7e3021f6bcea03b7a6557e3f0132/index.html')
    .then((res) => {
      return res.text();
    })
    .then((data) => {
        document.write(data);
        // get the p tag from the remote html file now we have the html in our document
        var firstParagraph = document.getElementsByTagName("p")[0];
        console.log(firstParagraph.textContent);
    })
}

Upvotes: 2

Related Questions