How Can I grab an field with getElementById after a user types it?

Question

I have a colorpicker field that loads with a default color and then the visitor can change the input value with either a color wheel or just by changing the text. I have javascript that takes the value of the colorpicker and sets the link href next to it to that value.

The problem is that when the page loads the link button is set to the default value in the colorpicker but when the visitor changes this value the link href doesn't change to reflect this without a refresh.

Here is the live site: http://www.brainbuzzmedia.com/themes/vertex/

Here is the javascript I have:

<script type="text/javascript">
$(document).ready(function(){

var a = document.getElementById('colorLink');
var color = document.getElementById('color-demo').value;
a.href = "http://www.brainbuzzmedia.com/themes/vertex/?color=" + color;

});
</script>

And here is the html where the colorpicker input and link are added:

<input type="text" name="color-demo" id="color-demo" value="#ff0000" class="colorfield regular-text" data-hex="true" onChange="refresh()"/><a href="" id="colorLink">LINK</

Answer 1

Perform that code whenever the value changes

$("#color-demo").change(function() {
    var a = document.getElementById('colorLink');
    var color = document.getElementById('color-demo').value;
    a.href = "http://www.brainbuzzmedia.com/themes/vertex/?color=" + color;
});