javascript - 如何更改每个字符的颜色

Question

我的某些代码有问题。我需要在将每个后续字母输入到输入中时更改其颜色

let p = document.querySelector("p");
let input = document.querySelector("input")

function randomColor() {
  let r = Math.floor(Math.random() * 256);
  let g = Math.floor(Math.random() * 256);
  let b = Math.floor(Math.random() * 256);
  return "rgb(" + r + " ," + g + " ," + b + ")";
}

input.addEventListener('input',function(){
   p.innerText = input.value
   for (var i = 0; i < p.length; i++) {
     p[i].style.color = randomColor()
   }
})

<input type="text" name="">
 <p></p>

我的问题:它们并不都是不同的颜色，例如:我输入你好，每个字母应该是不同的随机颜色**************************** ********************************** 请帮忙

Answer 1

您应该使用innerHTML，并在每次输入时添加一个带有随机颜色的span。另外，要获取插入的文本，您需要使用事件对象，如下所示:

let p = document.querySelector("p");
let input = document.querySelector("input")

function randomColor() {
  let r = Math.floor(Math.random() * 256);
  let g = Math.floor(Math.random() * 256);
  let b = Math.floor(Math.random() * 256);
  return "rgb(" + r + " ," + g + " ," + b + ")";
}

input.addEventListener('input',function(e){
  // since e.data can be null when backspacing we remove the last span when that occurs:
  if (e.data === null){
    p.removeChild(p.lastChild)
  }
  else {
    p.innerHTML = p.innerHTML + "<span style='color:" + randomColor() + "'>" + e.data + "</span>"
  }
})

<input type="text" name="">
 <p></p>