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

但后来我想用一些用户输入改变颜色。我的问题是它不起作用。它显示（用户选择的颜色）单词“undefined”。我用过控制台，我明白“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!'/>

注意：如果我在文字输入中键入“红色”，并在Chrome中打开控制台，并输入“cambiarColorUser（）”，则会回复“未定义”。

Answer 1

在你的代码的这一行：

mensaje=document.getElementById('clase').value;

.value适用于某些表单控件，而不适用于段落标记。

也许你的代码是：

mensaje=document.getElementById('clase').innerHTML;

此外，所有局部变量（仅在功能内使用的变量）应在其前面用var声明。这实际上并不会导致您当前的代码出现问题，但这是一种非常糟糕的做法，将来会引发问题。

innerHTML示例：用户输入不起作用，为什么？

更新

1 个答案: