Story with html and js

let chapterTitle;

let nextChapterButton;

let chapterText;

let chapterNumber = 0;

​

function setup(){

  createCanvas(windowWidth, windowHeight);

}

​

function createHtmlElements() {

  // Overskrift

  chapterTitle = document.createElement("h1");

  chapterTitle.textContent = chapters[chapterNumber].title;

  // Næste kapitel knap

  nextChapterButton = document.createElement("button");

  nextChapterButton.textContent = "Next Chapter";

  nextChapterButton.addEventListener("click", nextChapter);

  // tekstfelt

  chapterText = document.createElement("p");

  chapterText.textContent = chapters[chapterNumber].text;

  chapterText.style.fontSize = "2em";

  // Tilføje elementerne til siden

  document.body.prepend(chapterTitle);

  document.body.append(nextChapterButton);

  document.body.append(chapterText);

​

}

​

document.addEventListener('DOMContentLoaded', createHtmlElements);

​

function draw() {

  circle(mouseX, mouseY, 20);

}

​

function nextChapter(){

  // Increment chapter number

  chapterNumber++; // chapterNumber =  chapterNumber + 1;

  // out of bounds?

  if(chapterNumber > chapters.length-1){

    chapterNumber = 0;

  }

  // Update the content of title and text

  chapterTitle.textContent = chapters[chapterNumber].title;

  chapterText.textContent = chapters[chapterNumber].text;

}