javascript - innerHTML の例: ユーザー入力では機能しません。なぜですか?

Question

innerHTML の例を使用して、この作業コードがあります。

<script type="text/javascript">
// ejemplo de innerHTML
function cambiarColor(){
    var oldHTML = document.getElementById('para').innerHTML;
    var newHTML = "<span style='color:lightgreen'>" + oldHTML + "</span>";
    document.getElementById('para').innerHTML = newHTML;
}
</script>
<p id='para'>Hola <b id='nombre'>gente</b> </p> 
<input type='button' onclick='cambiarColor()' value='Change Text'/>

しかし、ユーザー入力を使用して色を変更したかったのです。私の問題は、それが機能しないことです。(ユーザーが選択した色で) 「未定義」という単語が表示されます。コンソールを使用しましたが、「mensaje」変数が定義されていないことを理解していますか? 何故ですか？

<script type="text/javascript">
// ejemplo de innerHTML con User Input
function cambiarColorUser(){
    mensaje=document.getElementById('clase').value;
    nuevoColor=document.getElementById('nuevoColor').value;
    mensajeCambiado="<span style='color:"+ nuevoColor +";'>"+ mensaje +"</span>";
    document.getElementById('clase').innerHTML=mensajeCambiado;
}
</script>
<p id='clase'><h1>Mensaje que cambia de color</h1> </p>
<input type="text" id="nuevoColor">
<input type='button' onclick='cambiarColorUser()' value='Cambia el Color!'/>

アップデート

返信を読んだ後、コードを更新しましたが、まだ機能しません ( http://jsfiddle.net/vjze5/ ):

<script type="text/javascript">
// ejemplo de innerHTML con User Input
function cambiarColorUser(){
    var mensaje=document.getElementById('clase').innerHTML;
    var nuevoColor=document.getElementById('nuevoColor').value;
    var mensajeCambiado="<span style='color:"+ nuevoColor +";'>"+ mensaje +"</span>";
    document.getElementById('clase').innerHTML=mensajeCambiado;
}
</script>
<p id='clase'><h1>Mensaje que cambia de color</h1> </p>
<input type="text" id="nuevoColor">
<input type='button' onclick='cambiarColorUser()' value='Cambia el Color!'/>

注: テキスト入力内に「red」と入力し、Chrome でコンソールを開いて「cambiarColorUser()」と入力すると、「undefined」と応答します。