Question

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?

Answer 1

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.