0

我有这个工作代码，带有一个 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”。

4

1 回答 1

0

在这行代码中：

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

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

也许你的意思是那行代码是：

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

此外，所有局部变量（仅在函数中使用的变量）都应该var在它们前面声明。这实际上并不会在您当前的代码中造成问题，但这是一种非常糟糕的做法，将来会导致问题。

于 2013-10-26T18:31:22.113 回答