在html中调用变量

Question

我正在尝试创建一个脚本,当您键入十六进制值并按提交时,它会将文本颜色更改为输入的颜色.

似乎问题是我在变量new html中调用变量"userInput"的方式

有任何想法吗？

<script type="text/javascript">

function changeText3(){
    var userInput = document.getElementById('userInput').value;
    var oldHTML = document.getElementById('para').innerHTML;
    var newHTML = "<span style='color:userInput'>" + oldHTML + "</span>";
    document.getElementById('para').innerHTML = newHTML;
}

</script>

<p id='para'>Welcome to the site <b>dude</b> </p> 
<input type='text' id='userInput' value='#' />
<input type='button' onclick='changeText3()' value='Change Text'/>

Answer 1

我建议使用样式引用而不是添加越来越多的跨度:

document.getElementById('para').style.color = userInput;