HTML Replace issue

Question

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 :D 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>

When you have called the function `down()` you are just replacing the string properly but you are then not appending it to display on the screen that is in the HTML. you will have to to this `x.innerHTML = x.innerHTML.replace(/is/gi, "was");` — kunal panchal, Feb 18 '21 at 09:53

score 1 · Accepted Answer · answered Feb 18 '21 at 09:54

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>

HTML Replace issue

1 Answers1