CODEWITHSUNDEEP
javascriptcss
mikenco
mikenco

Reputation: 25

Javascript onChange affecting CSS styles

I am trying create a 'live' view where our clients can edit the colors of a php page that they will embed into their own page.

By entering a hex value in each of the text fields, it should instantly change the background color value set for it's relative div.

<!--Enter a hex color to change the background of id="box1" -->
<input name="color1" id="color1" type="text" size="6" maxlength="6" onchange="DOTHIS(change background color of 'box1' to this value);"  />
<br />

<!--Enter a hex color to change the background of id="box2" -->
<input name="color2" id="color2" type="text" size="6" maxlength="6" onchange="DOTHIS(change background color of 'box2' to this value);"  />
<br />

<!--Enter a hex color to change the background of id="box2" -->
<input name="color3" id="color3" type="text" size="6" maxlength="6" onchange="DOTHIS(change background color of 'box3' to this value);"  />

<hr />

<div id="box1" style="background-color:#ff0000">HELLO 1</div>
<div id="box2" style="background-color:#00ff00">HELLO 2</div>
<div id="box3" style="background-color:#0000ff">HELLO 3</div>

This is probably simple to someone, but after a couple of days, I cannot find the right way to do it.

UPDATE:

After seeing the direction of the answers, I thought I'd better add the following..

How would this work if the id names were not related?

example:

id="maincolor" -> affected id="hello"
id="fontcolor" -> affected id="world"
id="buttoncolor" -> affected id="foo"

This is why I thought it might be better to inline javascript for each element?

There are only four colours to change, plus an option to hide various divs containing text and one checkbox to hide the title..

The system is here: https://www.overseasmortgagefinder.co.uk/affiliates/generator.php

As you can see from the left side, our users can customise how the 'sourcing system' will look on their site.

What I am trying to do is create a 'live view' window on the right instead of the static help guide.

Is this any clearer as to my goal?

Upvotes: 1

Views: 8651

Answers (3)

Sacred Socks
Sacred Socks

Reputation: 402

Well here's a fairly dynamic approach using jquery.

Change the format of the id's of your inputs to color-box1, color-box2 and color-box3 respectively.

<script type="text/javascript">
$(function() {
  // assigns a onChange event to all inputs with ids that start with "color-box"
  $("input[id^=color-box]").change(function () {    
    // validate user's input here    
    // if valid, grab id of changed input & remove the "color-" part    
    var id = $(this).attr("id").split("-", 2)[1];
    // set color of div using the id above   
    $("div#"+id).css("background-color","#"+$(this).val());
  }); 
});
</script>

If you need a pure javascript solution, just shout..

Upvotes: 1

Yuri Ghensev
Yuri Ghensev

Reputation: 2545

Solution without using jquery:

  • Remove onchange from your inputs, as onchange wont be fired until the user leaves (blur) the field.
  • Add onkeyup="changeBackground(this)" for each input field

Add this javascript function to your page:

changeBackground = function(source) {
    if (/^[a-f0-9]{3}|[a-f0-9]{6}$/.test(source.value)) { // test for a valid hex color
        var boxId = source.id.replace('color', 'box');
        document.getElementById(boxId).style.backgroundColor = '#'+source.value;
    }
}

Here is this fiddle to test.

Upvotes: 0

Blender
Blender

Reputation: 298432

How about this:

onchange="document.getElementById('box' + this.id.charAt(this.id.length - 1 )).style.backgroundColor = this.value;"

Also, you have two </form> closing tags. I'd get rid of the first one.

Upvotes: 0

Related Questions