Изменение цвета текста с помощью Javascript

Я пытаюсь создать программу, в которой я использую функцию для изменения цвета предварительно написанного текста с использованием массива и цикла for, в зависимости от того, что пользователь вводит при запросе. Вот мой код:Изменение цвета текста с помощью Javascript

// <Student Name> <Student ID> comment must be here. 
 

 
// This function will change the color of the text to the name of the color you give it. 
 
function changeColor(colorText) { 
 
    var text = document.getElementById("colorpar"); 
 
    text.innerHTML = "<font color=\"" + colorText + "\">The color is " + colorText + ".</font>"; 
 
} 
 

 

 
// Declare, create, and put values into your color array here 
 
var colors = new Array(5); 
 

 
colors[0] = "green"; 
 
colors[1] = "blue"; 
 
colors[2] = "yellow"; 
 
colors[3] = "orange"; 
 
colors[4] = "red"; 
 

 

 
// Create a loop that runs 4 times. 
 
// Each time it asks the user for a number between 0 and 4. 
 
// If an invalid input is entered, the color displayed should be black. 
 
// Otherwise display the color at that index in the array. 
 
for (var i = 1; i <= 4; i++) { 
 
    var colNumber = window.prompt("Enter a number from 0 to 4:"); 
 
    if (colNumber == 0 || colNumber == 1 || colNumber == 2 || colNumber == 3 || colNumber == 4) { 
 
    changeColor(colors[colNumber]); 
 
    } else { 
 
    changeColor("black"); 
 
    } 
 
}

<html> 
 

 
<head> 
 
    <title>Lab 7 Task 2</title> 
 
</head> 
 

 
<body bgcolor="white"> 
 
    <h1 id="colorpar"> 
 
\t \t The color is black. 
 
\t </h1> 
 

 
    <h1> 
 
\t </h1> 
 
</body> 
 

 
</html>

Что происходит текст будет отображаться только один раз я сделал все подсказки. Он показывает правильный цвет и текст и все, но в начале «Цвет черный». не отображается, и ничего не происходит до тех пор, пока не будет дан ответ на последний запрос.

Обратите внимание, что это для начинающего класса, поэтому ничего гораздо более продвинутого, чем то, что у меня здесь, не будет иметь большой поддержки. Я не писал функцию, она есть как часть задания. Я занимаюсь этим часами и не могу понять проблему!

источник

2016-11-02 InitialBN

'font' тегу является устаревшим и не поддерживается в HTML5. Не используйте это. Вместо этого используйте стили CSS. –

Это для класса, и мы не изучили CSS. Эта функция была создана моим профессором. Единственное, что я сделал, - это «// Объявлять, создавать и помещать значения в ваш массив цветов здесь» – InitialBN

Конечно, он всегда будет предлагать вам 4 раза, вы зацикливаете. Вместо этого вы должны нажать кнопку, которую вы должны щелкнуть, если хотите изменить цвета. –

Используйте SetInterval для этого.

проверки следующий фрагмент код

function changeColor(colorText) { 
 
    var text = document.getElementById("colorpar"); 
 
    text.innerHTML = "<font color=\"" + colorText + "\">The color is " + colorText + ".</font>"; 
 
} 
 

 

 
// Declare, create, and put values into your color array here 
 
var colors = new Array(5); 
 

 
colors[0] = "green"; 
 
colors[1] = "blue"; 
 
colors[2] = "yellow"; 
 
colors[3] = "orange"; 
 
colors[4] = "red"; 
 

 

 
// Create a loop that runs 4 times. 
 
// Each time it asks the user for a number between 0 and 4. 
 
// If an invalid input is entered, the color displayed should be black. 
 
// Otherwise display the color at that index in the array. 
 
var x = 0; 
 
var intervalId = setInterval(function() { 
 
    if (x == 4) { 
 
    clearInterval(intervalId); 
 
    } 
 
    var colNumber = window.prompt("Enter a number from 0 to 4:"); 
 
    if (colNumber == 0 || colNumber == 1 || colNumber == 2 || colNumber == 3 || colNumber == 4) { 
 
    setTimeout(changeColor(colors[colNumber]), 1000); 
 

 
    } else { 
 
    changeColor("black"); 
 
    } 
 
    x++; 
 
}, 100);

<body bgcolor="white"> 
 
    <h1 id="colorpar"> 
 
    The color is black. 
 
</h1> 
 

 
    <h1> 
 
</h1> 
 
</body>

Надеется, что это помогает

источник

2016-11-02 04:45:12 Geeky

Это будет работать, но какое-то объяснение того, почему оно решает проблему, было бы неплохо. – dave

Это сработало очень хорошо! Единственная проблема заключается в том, что мы не узнали ничего подобного, а назначение - использовать то, что мы узнали в классе, который предназначен только для/while циклов и массивов. Если бы я использовал это, я бы, скорее всего, не получил отметки. – InitialBN

Он хорошо работает с setInterval, потому что, когда вы зацикливаетесь и добавляете цвет к элементу, время между подсказкой и добавлением цвета не так много, поэтому оно не может показать, что происходит. Таким образом, setinterval помогает нам видеть цвета прикрепленный к элементу с указанным интервалом – Geeky

Изменение цвета текста с помощью Javascript

ответ

Смежные вопросы