HTML内の変数を呼び出します

Question

私はあなたが進値とプレスに入力すると、入力された色にテキストの色をitchanges提出するというスクリプトを作成しようとしています。

問題は、私は変数新しい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'/>

Answer 1

私の代わりに、より多くのスパンを追加するスタイル参照を使用することをお勧めします：

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

Answer 2

これが問題を引き起こしているだけで1行です。

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