title: How can you replace an image in a div to text
body: <p>I am stuck on how I can write a script in JS so when the user clicks on a image it transitions/ turns into text. </p>
  
  <p>I have a divs in a div as i have to use that for a scrolling animation. So when the user scrolls to the icon in which they want to they can click it and it would  turn into text, like when i click the job icon it shows the jobs listed. </p>
  
  <p>I tried to use ".innerHTML = "Hello World"" though that had failed.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Underscores&lt;/title&gt;
  &lt;link rel="stylesheet" href="styles.css"&gt;
  &lt;link href="https://cdn.jsdelivr.net/npm/jquery-        
   slotmachine@4.0.0/dist/jquery.slotmachine.min.css"&gt;&lt;/style&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"&gt;        
   &lt;/script&gt;
  &lt;script     
   src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;    
   &lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
    &lt;div id= "left" class="left"&gt;
  &lt;img src="https://s3.amazonaws.com/underscores.xyz/images/left.png" alt=""&gt;
    &lt;/div&gt;
  
    &lt;div class="middle" id = "theMiddle" style="width: 400px; height: 300px"&gt;
   &lt;div&gt;&lt;img     
   src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/About.png"         
   alt="" class="about" id="aboutID"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;img 
   src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/job.png" alt=""     
   &gt;&lt;/div&gt;
  &lt;div&gt;&lt;img 
   src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/middle.png" 
   alt=""&gt;&lt;/div&gt;
  
    &lt;/div&gt;
  
  
  
     &lt;div id= "right" class="right"&gt;
      &lt;img src="https://s3.amazonaws.com/underscores.xyz/images/right.png" 
   alt=""&gt;
    &lt;/div&gt;
  
  
    &lt;script src="https://cdn.jsdelivr.net/npm/jquery-    
   slotmachine@4.0.0/dist/slotmachine.min.js"&gt;&lt;/script&gt;
  
    &lt;script src="back.js" charset="utf-8"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>document.body.style.overflow = "hidden";
  //the key strokes for the up and down keys
  
  // Set up our container
  const el = document.querySelector("#theMiddle");
  // Create new SlotMachine
  const slot = new SlotMachine(el, {});
  
  
  document.onkeydown = checkKey;
  function checkKey(e) {
    e = e || window.event;
    //Secret Code: EADWEARD
    anime({
   targets: "div.right",
   translateX: {
    value: 200,
    duration: 500
   }
    });
    anime({
   targets: "div.left",
   translateX: {
    value: -200,
    duration: 500
   }
    });
  
    if (e.keyCode == "40") {
  //this is down
  //this will open it up
  slot.prev();
  
    } else if (e.keyCode == "38") {
  slot.next();
  
  
  }
  }
  
  //Scroll detection occurs here, without the scrollbar
  $("html").on("mousewheel", function(e) {
  anime({
  targets: "div.right",
  translateX: {
    value: 200,
    duration: 500
  }
  });
  anime({
  targets: "div.left",
  translateX: {
    value: -200,
    duration: 500
  }
  });
  var delta = e.originalEvent.wheelDelta;
  if (delta &lt; 0) {
  //This is for the scrolling down
  // animation opens up the brakets
  
  slot.prev();
  
  }if (delta &gt; 0) {
  slot.next();
   }
     });
  
  
  //this is for detecting clicks  for the divs in the middle div
  // 1 = the 2nd image , 2 = the  3rd image
  $(".middle div").click(function(){
    if($(this).index() == '1'){
  
  // The change occurs here
  
  console.log("the fucks");
  document.getElementById("aboutID").innerHTML = "Hello World";
   }if($(this).index() == '2'){ 
  
  // The change occurs here
  
    console.log("jobs page");
  }
  });
  </code></pre>