代码之家 › 专栏 › 技术社区 › Marc

如何替换超时内的文本

str-replace innerhtml replace string javascript

Marc · 技术社区 · 4 年前

我试图替换超时内的文本,同时只在“你的代码在这里”中操作下面HTML的一部分。

一个“.innerHTML”应该可以做到这一点,但我遇到了元素为null的情况。

任何帮助都将不胜感激!

这是我的全部尝试:

window.myHandler = function() {
  console.log('Click!');
};

window.getRandomNumber = function(max) {
  return Math.floor(Math.random() * max)
}

var colors = ['red', 'blue', 'green', 'orange', 'purple'];
window.changeHeadlineColor = function(croHeadline) {
  var random = getRandomNumber(5000);
  var randomString = random.toString();
  setTimeout(() => {
    var colorKey = (randomString.length < 4) ? 0 : parseInt(randomString.charAt(0));
    croHeadline.setAttribute('data-color', colors[colorKey]);
    changeHeadlineColor(croHeadline);
  }, random);
};

    ////////////////////
    /* YOUR CODE HERE */
    ////////////////////

document.querySelector('#myDiv').addEventListener('click', myHandler);

setTimeout(() => {
  myDiv.insertAdjacentHTML('beforebegin', '<h1 id="cro-headline" data-color="red">Cro Metrics</h1>');
  var croHeadline = document.querySelector('#cro-headline');
  changeHeadlineColor(croHeadline);
}, getRandomNumber(5000));

[data-color="red"] {
  color: red;
}

[data-color="blue"] {
  color: blue;
}

[data-color="green"] {
  color: green;
}

[data-color="orange"] {
  color: orange;
}

[data-color="purple"] {
  color: purple;
}

<div id="myDiv">OMG Click me!</div>

2 回复 | 直到 4 年前

IT goldman 4 年前

通过“破解”超时后运行的函数,可以实现这一点。

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    [data-color="red"] {
      color: red;
    }
    
    [data-color="blue"] {
      color: blue;
    }
    
    [data-color="green"] {
      color: green;
    }
    
    [data-color="orange"] {
      color: orange;
    }
    
    [data-color="purple"] {
      color: purple;
    }
  </style>
  <script>
    window.myHandler = function() {
      console.log('Click!');
    };

    window.getRandomNumber = function(max) {
      return Math.floor(Math.random() * max)
    }

    var colors = ['red', 'blue', 'green', 'orange', 'purple'];
    window.changeHeadlineColor = function(croHeadline) {
      var random = getRandomNumber(5000);
      var randomString = random.toString();
      setTimeout(() => {
        var colorKey = (randomString.length < 4) ? 0 : parseInt(randomString.charAt(0));
        croHeadline.setAttribute('data-color', colors[colorKey]);
        changeHeadlineColor(croHeadline);
      }, random);
    };
  </script>
  <script>
  var old = window.changeHeadlineColor;
    window.changeHeadlineColor = function(croHeadline) {
      old(croHeadline);
      const newCroHeadline = document.querySelector('#cro-headline');
      newCroHeadline.innerHTML = "My new text!";

    }

  </script>
</head>

<body>
  <div id="myDiv">OMG Click me!</div>
  <script>
    document.querySelector('#myDiv').addEventListener('click', myHandler);

    setTimeout(() => {
      myDiv.insertAdjacentHTML('beforebegin', '<h1 id="cro-headline" data-color="red">Cro Metrics</h1>');
      var croHeadline = document.querySelector('#cro-headline');
      changeHeadlineColor(croHeadline);
    }, getRandomNumber(5000));
  </script>
</body>

</html>

mplungjan 4 年前

您的脚本在标题存在之前找不到标题

您可以隐藏标题并使用setTimeout显示它

此外,无需在所有函数前加上window前缀,也无需将页面加载时希望发生的所有事情移动到同一个函数中

let tId1, tId2;
const myHandler = () => {
  console.log('Click!');
};

const getRandomNumber = max => Math.floor(Math.random() * max);

const colors = ['red', 'blue', 'green', 'orange', 'purple'];
const changeHeadlineColor =  croHeadline => {
  let random = getRandomNumber(5000);
  let randomString = random.toString();
  tId1 = setTimeout(() => {
    let colorKey = (randomString.length < 4) ? 0 : parseInt(randomString.charAt(0));
    croHeadline.setAttribute('data-color', colors[colorKey]);
    changeHeadlineColor(croHeadline);
  }, random);
};


document.addEventListener("DOMContentLoaded", () => { // wait until DOM has loaded
  const newCroHeadline = document.querySelector('#cro-headline');
  newCroHeadline.innerHTML = "My new text!";
  document.querySelector('#myDiv').addEventListener('click', myHandler);
  tId2 = setTimeout(() => {
    var croHeadline = document.querySelector('#cro-headline');
    changeHeadlineColor(croHeadline);
    croHeadline.hidden = false;
  }, getRandomNumber(5000));
});

[data-color="red"] {
  color: red;
}

[data-color="blue"] {
  color: blue;
}

[data-color="green"] {
  color: green;
}

[data-color="orange"] {
  color: orange;
}

[data-color="purple"] {
  color: purple;
}

<h1 id="cro-headline" data-color="red" hidden>Cro Metrics</h1>
<div id="myDiv">OMG Click me!</div>