我的某些代码有问题。我需要在将每个后续字母输入到输入中时更改其颜色
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>
最佳答案
您应该使用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>
关于javascript - 如何更改每个字符的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59864835/