innerHTML示例:使用用户输入无效，为什么? [英] innerHTML example: With user input it doesn´t work, why?

问题描述

我有这个工作代码，并带有一个innerHTML示例:

I have this working code, with an example of 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"变量吗?为什么会这样?

But then I wanted to change color using some user input. My problem is that it doesn´t work. It shows (in the color the user chooses) the word "undefined". I´ve used the console and I understand that "mensaje" variable is not defined? Why is that?

<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".

Note: If I type "red" inside the text input, and open the console in Chrome, and type "cambiarColorUser()" it replies "undefined".

推荐答案

在此行代码中:

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

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

.value is for some form controls, not for paragraph tags.

也许您要使该行代码为:

Perhaps you meant for that line of code to be:

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

---

此外，所有局部变量(仅在函数中使用的变量)都应在其前面使用var进行声明.这实际上并不会在您当前的代码中引起问题，但是这是非常糟糕的做法，将来会引起问题.

---

Also, all local variables (variables intended to be used only within a funnction) should be declared with var in front of them. This isn't actually causing a problem in your current code, but is a very bad practice and will cause problems in the future.

这篇关于innerHTML示例:使用用户输入无效，为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！