0

16進値を入力して送信を押すと、テキストの色が入力された色に変わるスクリプトを作成しようとしています。

問題は、変数newhtml内で変数「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'/>
4

3 に答える 3

8

スパンを追加する代わりに、スタイル参照を使用することをお勧めします。

document.getElementById('para').style.color = userInput;
于 2009-11-12T13:47:10.263 に答える
2

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

var newHTML = "<span style='color:" + userInput + "'>" + oldHTML + "</span>";
于 2009-11-12T13:41:45.450 に答える
0

userInput変数をnewHTML変数に「注入」する必要があります。下記参照;

<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'/>
于 2009-11-12T13:43:51.670 に答える