#javascript #arrays #loops #for-loop
#javascript #массивы #циклы #for-цикл
Вопрос:
Я создаю функцию для придания тексту цвета радуги.
У меня есть два массива. Один для цвета и один для строки.
То, что я в основном пытаюсь сделать, это перебирать цвета столько раз, сколько необходимо, в зависимости от количества текста.
var colors = ['blue', 'red', 'green', 'black', 'orange', 'purple'];
function colorText(word) {
var slicedText = word.split('');
var rainbowText= '';
if (typeof(word) !== 'string') {
alert('Thats not a word!');
} else {
for (var i = 0; i < slicedText.length; i ) {
rainbowText = '<span style="color:' colors[i] ';">' slicedText[i] '</span>';
}
document.getElementById('text-input').innerHTML = rainbowText;
}
}
colorText('this is a really long text');
<div id="text-input">
</div>
Комментарии:
1. Измените эту строку rainbowText = ‘ <span>’ slicedText[i] «</span>;
Ответ №1:
Вы индексируете за пределами массива цветов, когда значение slicedText.length
больше colors.length
. Если желаемое поведение должно начинаться с индекса 0 после достижения конца цветов, используйте оператор modulo .
colors[ i % colors.length ]
var colors = [ 'blue', 'red', 'green', 'black', 'orange', 'purple' ];
function colorText(word) {
var slicedText = word.split( '' );
var rainbowText = '';
if (typeof( word ) !== 'string') {
alert('Thats not a word!');
} else {
for (var i = 0; i < slicedText.length; i ) {
rainbowText = '<span style="color:' colors[ i % colors.length ] ';">' slicedText[ i ] '</span>';
}
document.getElementById( 'text-input' ).innerHTML = rainbowText;
}
}
colorText( 'this is a really long text' );
<div id="text-input">
</div>
Ответ №2:
Другой способ реализации той же работы без окрашивания пробелов.
var str = "this is a really long text",
colors = ['blue', 'red', 'green', 'black', 'orange', 'purple'],
result = [...Array(str.length)].reduce((p,_,i) => p (str[i] !== ' ' ? '<span style="color:' colors[i%colors.length] ';">' str[i] '</span>'
: ' '),'');
document.getElementById("textdiv").innerHTML = resu<
<div id="textdiv"></div>