Создайте поле ввода HTML, которое принимает значение цвета rgb, которое меняет фон textarea в javascript.

Question

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

Я работаю по разработке интернет-текстовый процессор (что-то вроде Microsoft Word), я добавил все, что нужно, за исключением того

Я хочу поле ввода, где будет подставляться значением цвета RGB и назначенную текстовое поле цвет фона изменится. Вход должен находиться в диапазоне от rgb (от 0 до 255).

Я пробовал разные вещи в Интернете, таких как:

<script type="text/javascript"> 
    var a = parseInt(prompt("Enter R"), 10) || 105, 
     b = parseInt(prompt("Enter G"), 10) || 105, 
     c = parseInt(prompt("Enter B"), 10) || 105; 
    document.body.style.backgroundColor= 'rgb(' + a + ',' + b + ',' + c + ')'; 
</script> 

Но ничто не близко к тому, что мне нужно. Примечание Я играл с этим сценарием и многое другое ...

Скажем, у меня есть текстовое поле:

<textarea id="TextArea" placeholder="Please enter your text here.."</textarea> 

И есть поле ввода, как я могу сделать значение RGB там изменить фон цвет для текстового поля?

Заранее спасибо.

Answer 1

Я решил это f аконец! это было глупо, но хорошо, все ошибки в кодировании в значительной степени глупые, которые заставляют нас застревать.

Мне нужно было изменить приглашение, чтобы вместо окна ввода всплывающих окон мне понадобилось текстовое поле, в котором пользователь может свободно вводить свои значения rgb всякий раз, когда им нужно. Таким образом, я создал три текстовых поля и дал каждому из них идентификатор, первый дал r, затем g, затем b, и присвоил каждому значение переменной document.getElementById («r»)

В конце я назначил результат три входных текста в текстовое поле, для которых я хочу изменить цвет bg. Что касается проверки, это довольно просто, если оператор else, который гарантирует, что число равно или ниже 255 и 0 или выше.

Answer 2

Я думаю, вам нужно поместить свой код в функции window называют в onload события:

<script type="text/javascript"> 
    window.onload = function(){ 
     var a = parseInt(prompt("Enter R"), 10) || 105, 
    b = parseInt(prompt("Enter G"), 10) || 105, 
    c = parseInt(prompt("Enter B"), 10) || 105;   
    document.querySelector("#TextArea").style.backgroundColor = "#" + a + b + c;  
    } 
</script> 

Вы должны сделать это, потому что браузер будет выполнять свой яваскрипта код, прежде чем он прекращает оказывать HTML.

Таким образом, мы завершим ваш код в функцию и сохраним его в onload, чтобы выполнить его только тогда, когда браузер загружает HTML-рендеринг и загрузку ресурсов.

Чтобы понять window.onload взглянуть на this

Answer 3

В вашем примере вы устанавливаете цвет фона, а не цвет фона текстового поля:

увидеть, если этот пример поможет вам ...

var a = parseInt(prompt("Enter R"), 10) || 105, 
 
     b = parseInt(prompt("Enter G"), 10) || 105, 
 
     c = parseInt(prompt("Enter B"), 10) || 105; 
 
    document.getElementById("TextArea").style.backgroundColor= 'rgb(' + a + ',' + b + ',' + c + ')';

<textarea id="TextArea" placeholder="Please enter your text here.."></textarea>`