javascript - 更改输入文本的颜色

Question

我有一个文本框，我通过它输入文本，并在我点击一个按钮后在下面的段落中显示它。但是我想要3 的倍数以显示不同的颜色，例如蓝色。

如果我输入我是 bat 侠。然后我想让 m,t,n 等等变成蓝色。我如何实现这一目标？感谢您的帮助。

这是我试过的代码:

function change() {
  myOutput = document.getElementById('output');
  textbox = document.getElementById('text').value;
  myOutput.innerHTML = "You entered: " + textbox;
  var arr = textbox.split('');
  console.log(arr);
  for (i = 0; i < arr.length; i += 3) {
    console.log(i);
  }
}

<input type="text" id="text" />
<button onclick="change()">Change</button>
<p id="output"></p>

Answer 1

function change() {
  myOutput = document.getElementById('output');
  textbox = document.getElementById('text').value;
  
  var arr = textbox.split('');
  var newText = '';
  console.log(arr);
  for (i = 0; i < arr.length; i++) {
    if(i%3==2){
      newText += "<strong style='color:blue'>"+arr[i]+"</strong>";
    }else{
      newText += arr[i];
    }
  }
  myOutput.innerHTML = "You entered: " + newText;
}

<input type="text" id="text" />
<button onclick="change()">Change</button>
<p id="output"></p>