HTML替换问题[重复]答案

【问题标题】：HTML Replace issue [duplicate]HTML替换问题[重复]
【发布时间】：2021-05-21 06:06:18
【问题描述】：

作为一项任务，我被要求制作一个按钮，按下该按钮会将段落中的任何“is”替换为“was”，但它不起作用并且在控制台中没有显示错误。任何帮助将不胜感激：D 代码如下：

<!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>

【问题讨论】：

另外我似乎无法对齐按钮但我放弃了：P
当您调用函数down() 时，您只是正确地替换了字符串，但您并没有将其附加到HTML 中的屏幕上显示。你将不得不去这个x.innerHTML = x.innerHTML.replace(/is/gi, "was");

标签： javascript html

【解决方案1】：

您必须将返回值分配给您的元素文本。

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

当您使用 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>

【讨论】：