Как применить случайные цвета к каждой букве, а не к слову?

Question

Пример результата:

Это относится ко всему слову. Как применить произвольный цвет к каждой букве?

let input = document.querySelector('.input');
let output = document.querySelector('.output');
let colors = ['tomato', 'deeppink', 'skyblue', 'dodgerblue', 'violet', 'darkslateblue', 'green', 'crimson']


function colorNames(e) {
  let inputVal = document.querySelector('input').value;
  output.innerHTML = inputVal; // print out

  let randomColors = Math.floor((Math.random() * colors.length + 1)); // random color names

  if (output.innerHTML) {
    output.style.color = colors[randomColors];
  }

}

input.addEventListener('input', colorNames);

<input type="text" class="input" placeholder="Type your name">

<div class="output">
  <!-- typed value will be printed here -->
</div>

Answer 1

Чтобы установить произвольный цвет для каждой буквы, вы должны преобразовать каждую букву как отдельный элемент.

Вы можете split() всех символов с пустой строкой. Затем используйте map(), чтобы обернуть каждую букву элементом span, чтобы вы могли применить стиль (случайный цвет) к каждой букве. После генерации массива вы должны join() их присвоить свойству innerHTML выходного элемента.

Попробуйте следующим образом:

let input = document.querySelector('.input');
let output = document.querySelector('.output');
let colors = ['tomato', 'deeppink', 'skyblue', 'dodgerblue', 'violet', 'darkslateblue', 'green', 'crimson']


function colorNames(e) {
  let inputVal = document.querySelector('input').value.split('');
  inputVal = inputVal.map(l => {
    let randomColors = Math.floor((Math.random() * colors.length + 1));
    l = '<span style=color:'+colors[randomColors]+'>' + l +'</span>';
    return l;
  });
  output.innerHTML = inputVal.join(''); // print out

}

input.addEventListener('input', colorNames);

<input type="text" class="input" placeholder="Type your name">

<div class="output">
   <!-- typed value will be printed here -->
</div>

Answer 2

var colors = ['tomato', 'deeppink', 'skyblue', 'dodgerblue', 'violet', 'darkslateblue', 'green', 'crimson']
var output = document.querySelector(".output");

var input = document.querySelector(".input");

input.addEventListener("keyup",outputText);

function getRandomColor() {
  return colors[Math.floor(Math.random() * colors.length)];
}

function outputText() {
  var val = input.value;
  var res = [];

  for(var i = 0; i < val.length; i++) {
    res[i] = val[i];
    res[i] = '<span style="color:' + getRandomColor() + ';">' + res[i] + '</span>'
  }

  output.innerHTML = "";
  for(var i = 0; i < val.length; i++) {
    output.innerHTML += res[i]
  }
}

<input type="text" class="input" placeholder="Type your name">

<div class="output">
</div>