javascript - 用户输入字段后，如何使用 getElementById 获取字段？

Question

我有一个加载默认颜色的颜色选择器字段，然后访问者可以使用色轮或仅通过更改文本来更改输入值。我有 javascript，它获取颜色选择器的值并将其旁边的链接 href 设置为该值。

问题是，当页面加载时，链接按钮被设置为颜色选择器中的默认值，但是当访问者更改此值时，链接 href 不会更改以反射(reflect)这一点，而无需刷新。

这里是实时站点:http://www.brainbuzzmedia.com/themes/vertex/

这是我的 JavaScript:

<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>

这是添加颜色选择器输入和链接的 html:

<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

只要值发生变化就执行该代码

$("#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;
});