How to change desired div's background color by entering hex color in input filed (with jQuery or without)?

Question

Want the background color of the 40x40px box automatically change by entering desired color in input field. I need both solutions, with jQuery and without (if it is possible).

I wrote some code, but got stuck when tried to bind entered value in input field with value of background color proprety in jQuery code...

HTML code

<div>
   <span>Enter color (Hex Code):</span>
     <span> <input class="pickedColor" type="text"/> </span>                      
</div>
</br>
<div class="elementToChange" style="height:40px; width:40px; border:1px solid black"></div>

jQuery code

$('.pickedColor').on('change', function() {
    $('.elementToChange').css('background-color' : 'some value');
})

Also, you might want to look into some input validation to handle the case when an incorrect color value is entered. [Here](http://stackoverflow.com/questions/8027423/how-to-check-if-a-string-is-a-valid-hex-color-representation) could be a place to start. — Anders, Jul 24 '15 at 09:33

score 3 · Answer 1 · answered Jul 24 '15 at 09:00

3

This may help you :

 $('.pickedColor').on('change', function() {
        $('.elementToChange').css('background-color', $(this).val());
    })

answered Jul 24 '15 at 09:00

Jen

398
1
4
15

score 1 · Answer 2 · answered Jul 24 '15 at 09:03

1

With jQuery, this should work.

$('.pickedColor').on('change', function() {
    var value = $(this).val();
    $('.elementToChange').css('background-color' : value);
});

answered Jul 24 '15 at 09:03

G2N

159
1
1
7

It works after hiting Enter. Actually, what I wanted is to change div's color immediately after enternig hex color without hiting Enter. keyup event did the work. – Aug 12 '15 at 13:19

Amani Ben Azzouz · Accepted Answer · 2015-07-24T09:21:22.863

JQuery

you can use keyup event:

 $('.pickedColor').keyup(function() {
        $('.elementToChange').css('background-color', $(this).val());
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
   <span>Enter color (Hex Code):</span>
     <span> <input class="pickedColor" type="text"/> </span>                      
</div>
</br>
<div class="elementToChange" style="height:40px; width:40px; border:1px solid black"></div>

Javascript

<div>
   <span>Enter color (Hex Code):</span>
     <span> <input class="pickedColor" type="text" onkeyup="changeColor(this.className)"/> </span>                      
</div>
</br>
<div class="elementToChange" style="height:40px; width:40px; border:1px solid black"></div>
<script>
    function changeColor(className){
     document.getElementsByClassName("elementToChange")[0].style.background = document.getElementsByClassName(className)[0].value;
    }
</script>

jQuery solution using keyup event did the work. I have no idea why the code with "on change" event doesn't work... — , Jul 24 '15 at 10:01
see this if you want to use onchange and avoid hitting on enter tab --> http://stackoverflow.com/questions/14771023/change-event-not-fired-on-return-key — Amani Ben Azzouz, Jul 24 '15 at 10:07

score 0 · Answer 4 · answered Jul 24 '15 at 09:05

With Jquery

<div>
   <span>Enter color (Hex Code):</span>
     <span> <input class="pickedColor" id ="pickedColor" type="text"/> </span> 
     <span> <input id="pickedColorBtn" type="button"/> </span>             
</div>

its better if you let user to click and change button color

$("#pickedColorBtn").on("click",function(){
     $(".elementToChange").css('background-color', $("#pickedColor").val());
});

It is not possible without javascript or jquery as these language exists for user to interact with html

score 0 · Answer 5 · answered Jul 24 '15 at 09:15

Here is a version without jQuery:

var j, lenJ, listenerTargets;

listenerTargets = document.getElementsByClassName('pickedColor');

function listener() {
    var targets = document.getElementsByClassName('elementToChange'),
        i, lenI;
    for (i = 0, lenI = targets.length; i < lenI; i++) {
        targets[i].style["background-color"] = this.value;
    }
}

for (j = 0, lenJ = listenerTargets.length; j < lenJ; j++) {
    listenerTargets[j].addEventListener('change', listener);
}

working Fiddle: [https://jsfiddle.net/oy7xwyxx/]

score 0 · Answer 6 · answered Jul 24 '15 at 10:05

$(document).ready(function(){
     $("#colorInput").focusout(function(){
 $('#divColor').css("background-color", $("#colorInput").val());
     });
});

<div>
    <span>Enter color (Hex Code):</span>
    <span> <input type="text" id="colorInput"/> </span>                      
</div>
<div id="divColor" style="height:40px; width:40px; border:1px solid black"></div>

How to change desired div's background color by entering hex color in input filed (with jQuery or without)?

6 Answers6

JQuery

Javascript

With Jquery