I'm making a text based horror game for fun and I'm facing a problem on replacing my image, specifically after a certain line of text.

I did display a second image (I simply put the image src in the html window) but it was placed below the one I want to replace. I asked a question here but I worded it incorrectly (I'm not a native speaker and completely clueless as far as coding terminology goes), and with the help of a user here I only managed to display the image after a specific line of text appears.

But unfortunately, I wasn't actually seeking that. Anyone can help me?

CODE:

var objects = [
  "The rain goes clickety clack tack. It was a cold night and a ruthful glimmer of azure pervaded the skies, which were dormantly laid above the cosmopolitan city. The children quietly wept under tattered rags and the grown ups began celebrating on the filth-stained juice joints, while the Plenilune was shining brightly upon them, giving an everlasting impression of cruel romanticism.",
  "Me and Mary went on a ride with the new red car through the woods. We had an argument about Helena. And then an accident happened. The car crashed. I-I hope she's dead.",
  "I wandered the woods and the memories slowly faded away. The insects were buzzing and the birds were chirping. As I was walking towards the forest's insides, I came across a group of people mourning over a mutilated body.",
];

function toggleFullScreen(elem) {
  if (
    (document.fullScreenElement !== undefined &&
      document.fullScreenElement === null) ||
    (document.msFullscreenElement !== undefined &&
      document.msFullscreenElement === null) ||
    (document.mozFullScreen !== undefined && !document.mozFullScreen) ||
    (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)
  ) {
    if (elem.requestFullScreen) {
      elem.requestFullScreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullScreen) {
      elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }
}

const paragraph = document.getElementById("doThis");
const writeSpeed = 30;
let letterIndex = 0;
let objectsIndex = 0;

function write() {
  const sentence = objects[objectsIndex];
  if (letterIndex > sentence.length) {
    letterIndex = 0;
    objectsIndex  ;
    return;
  }
  paragraph.innerHTML  = sentence.charAt(letterIndex);
  letterIndex  ;
  setTimeout(write, writeSpeed);
}

function help() {
  paragraph.innerHTML = "";
  write();
}

<center><img src = "https://risdmuseum.org/sites/default/files/styles/scaled_900/museumplus/51848.jpg" id= "img"></center>
<input type="button" value="Fullscreen" onclick="toggleFullScreen(document.body)">
<div class = "form">
    <button onclick="help();">click</button>
    <p id="doThis" data-index="-1"></p>
</div>

CodePudding user response：

You can change the image when objectIndex changes or when the button is clicked...

var objects = [
  "The rain goes clickety clack tack. It was a cold night and a ruthful glimmer of azure pervaded the skies, which were dormantly laid above the cosmopolitan city. The children quietly wept under tattered rags and the grown ups began celebrating on the filth-stained juice joints, while the Plenilune was shining brightly upon them, giving an everlasting impression of cruel romanticism.",
  "Me and Mary went on a ride with the new red car through the woods. We had an argument about Helena. And then an accident happened. The car crashed. I-I hope she's dead.",
  "I wandered the woods and the memories slowly faded away. The insects were buzzing and the birds were chirping. As I was walking towards the forest's insides, I came across a group of people mourning over a mutilated body.",
];
var images = ["https://risdmuseum.org/sites/default/files/styles/scaled_900/museumplus/51848.jpg", "https://www.kollwitz.de/img/inhalt/Sammlung/Politisches/kn-145-v.jpg",
"https://risdmuseum.org/sites/default/files/styles/scaled_900/museumplus/51848.jpg",
"https://www.kollwitz.de/img/inhalt/Sammlung/Politisches/kn-145-v.jpg"]

window.addEventListener("DOMContentLoaded", () => {
  const paragraph = document.getElementById("doThis");
  const img = document.getElementById("img")
  const writeSpeed = 30;
  let letterIndex = 0;
  let objectsIndex = 0;
  let tId;
  let oldIndex; 
  const write = () => {
    const sentence = objects[objectsIndex];
    if (objectsIndex != oldIndex) {
      img.src = images[objectsIndex];
      oldIndex = objectsIndex; // we do nto want to change image every 30 milliseconds
    }  
    if (letterIndex > sentence.length) {
      letterIndex = 0;
      objectsIndex  ;
      clearInterval(tId);
      return;
    }
    paragraph.innerHTML  = sentence.charAt(letterIndex);
    letterIndex  ;
  };

  document.getElementById("start").addEventListener("click", () => {
    paragraph.innerHTML = "";
    write(); // start immediately we click
    clearInterval(tId); // clear an already running write
    tId = setInterval(write, writeSpeed); // then continue after speed milliseconds
  });
});

img {
  height: 300px;
}

.center {
  text-align: center;
}

<div ><img  src="" id="img"></div>
<div >
  <button type="button" id="start">click</button>
  <p id="doThis" data-index="-1"></p>
</div>