HTML Replace issue

As a task, I was asked to make a button that when pressed it will replace any "is" in the paragraph into "was" but it wouldn’t work and showed no errors in the console. Any help would be appreciated 😀
Here’s the code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .center {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    </style>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
    <title>
      index__2
    </title>
  </head>
  <body style = "background-color:#e6e6e6">
    <h1 style="color:#ff0000 ;font-family: 'Roboto', sans-serif ;text-align:center; font-size:250%">Undefined</h1>
    <p style = "font-family: 'Roboto', sans-serif; font-size: 150%" id = "aha">The National Aeronautics and Space Administration is an independent agency of the U.S. federal government responsible for the civilian space program, as well as aeronautics and space research. NASA science is focused on better understanding Earth through the Earth Observing System; advancing heliophysics through the efforts of the Science Mission Directorate's Heliophysics Research Program; exploring bodies throughout the Solar System with advanced robotic spacecraft such as New Horizons; and researching astrophysics topics, such as the Big Bang, through the Great Observatories and associated programs. The agency's administration is located at NASA Headquarters in Washington, DC, and provides overall guidance and direction.</p>
    <button type = "button" onclick = "down()" style = "font-family: 'Roboto', sans-serif; font-size: 150%; font-weight: bold">
      Change!
    </button>
    <script>
      var x = document.getElementById("aha")
      
      function down(){
        x.innerHTML.replace(/is/gi, "was")
      }
    </script>
  </body>
</html>

6 thoughts on “HTML Replace issue”

  1. You have to assign the return value to your elements text.

    x.textContent = x.textContent.replace(/is/gi, "was")
    

    Same applies when you use innerHTML.

    <!DOCTYPE html>
    <html>
    
    <head>
      <style>
          .center {
          margin: 0;
          position: absolute;
          top: 50%;
          left: 50%;
          ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
      </style>
      <link rel="preconnect" href="https://fonts.gstatic.com">
      <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
      <title>
        index__2
      </title>
    </head>
    
    <body style="background-color:#e6e6e6">
      <h1 style="color:#ff0000 ;font-family: 'Roboto', sans-serif ;text-align:center; font-size:250%">Undefined</h1>
      <p style="font-family: 'Roboto', sans-serif; font-size: 150%" id="aha">The National Aeronautics and Space Administration is an independent agency of the U.S. federal government responsible for the civilian space program, as well as aeronautics and space research. NASA science is focused on better understanding Earth through
        the Earth Observing System; advancing heliophysics through the efforts of the Science Mission Directorate's Heliophysics Research Program; exploring bodies throughout the Solar System with advanced robotic spacecraft such as New Horizons; and researching
        astrophysics topics, such as the Big Bang, through the Great Observatories and associated programs. The agency's administration is located at NASA Headquarters in Washington, DC, and provides overall guidance and direction.</p>
      <button type="button" onclick="down()" style="font-family: 'Roboto', sans-serif; font-size: 150%; font-weight: bold">
          Change!
        </button>
      <script>
        var x = document.getElementById("aha")
    
        function down() {
          x.textContent = x.textContent.replace(/is/gi, "was")
        }
      </script>
    </body>
    
    </html>
    Reply

Leave a Comment