调用里面的html变量

Question

我试图让一个脚本，当你在一个十六进制值，然后按输入提交itchanges文字颜色为输入的颜色。

看来问题是我打电话变量新的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;

Answer 2

这只是一个线是造成该问题：

var newHTML = "<span style='color:" + userInput + "'>" + oldHTML + "</span>";

Answer 3

你需要“注入”用户输入变量到您的新的HTML变量。见下文;

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