1

Lo que quiero lograr es cambiar el color del texto de la variable c, por el color que escoja el usuario en una lista desplegable (select). Pero no cambia el color, solo queda en rojo, ¿por qué?

Mi código es éste:

function ciclos() {

  var arrayU = new Array(3);
  var f;
  for (f=0;f<arrayU.length;f++) { // ARRAY LENGTH = 3 = FOR = 0, 1 , 3
    var v = prompt('Ingresa los 3 valores a multiplicar:','');
    arrayU[f] = parseInt(v);
  }
  
  var total = 1;
  //var multiplicacion;
  //var number;
  for (f=0;f<arrayU.length;f++) {
    total = arrayU[f] * total;
  }

  function color(opcion) {
    this.value = opcion;
    c = document.getElementById('total');
    c.innerHTML = total;
    
    if (opcion == 'verde') {
      c.style.color = "blue";
    }
    else {
      c.style.color = "red";
    }
  }

  color();
}
<input type="button" value="Multiplicacion DE VALORES MEDIANTE CICLOS, ARRAYS Y ACUMULADOR" onClick="ciclos();"/>
    
<b>La multiplicación de los valores es: </b><b id="total"></b>
    
<select onchange="color(this.value)">
  <option value="rojo">Rojo</option>
  <option value="azul">Azul</option>
  <option selected value="verde">Verde</option>    
</select>

4 respuestas 4

3

Le puedes pasar el nombre de color a la función directamente, tomándolo del value de cada select.

La función se puede hacer menos dependiente si se quiere, pasándole en parámetro el id del elemento: function cambiarColor(color, idElemento){...}.

De ese modo te serviría para cambiar el color de cualquier elemento.

function ciclos() 
{
    var arrayU = new Array(3);
    var f;
    for (f=0;f<arrayU.length;f++) 
    { // ARRAY LENGTH = 3 = FOR = 0, 1 , 3
       var v = prompt('Ingresa los 3 valores a multiplicar:','');
       arrayU[f] = parseInt(v);
     }
    var total = 1;
    //var multiplicacion;
    //var number;
    for (f=0;f<arrayU.length;f++) 
    {
       total = arrayU[f] * total;
    }
    c = document.getElementById('total');
    c.innerHTML = total;
}


function cambiarColor(color, idElemento) 
{
  var el = document.getElementById(idElemento);
  el.style.color = color;
}
<!DOCTYPE html>
<html>
<head>
 <title>Javascript Learning</title>
 <script type="text/javascript" src="main.js"></script>
</head>
<body>

 <p>MULTIPLICACIÓN DE VALORES MEDIANTE CICLOS, ARRAYS Y ACUMULADOR</p>

 <input type="button" value="Haga click para introducir valores" onClick="ciclos();"/><br /> <br />

 <b>La multiplicación de los valores es: <span id="total"></span></b>

 <select name="select" onchange="cambiarColor(value, 'total');">
    <option value="black" selected>-Seleccione un color-</option> 
    <option value="red">Rojo</option> 
    <option value="blue">Azul</option>
    <option value="green">Verde</option>
 </select>


 <hr />
 <p id="otro"><b>Esto es OTRA COSA</b></p>

 <select name="select" onchange="cambiarColor(value, 'otro');">
    <option value="black" selected>-Seleccione un color para otra cosa-</option> 
    <option value="brown">Marrón</option> 
    <option value="orange">Naranja</option>
    <option value="magenta">Magenta</option>
 </select>
</body>
</html>

2
  • Muchisimas gracias :)
    – ESCM
    Commented el 25 abr. 2017 a las 1:45
  • @EduardoSebastian De nada. Me alegra que lo hayas resuelto. Saludos.
    – A. Cedano
    Commented el 25 abr. 2017 a las 4:07
1

Modifique tu tabla para que los valores de los colores este en ingles y corregí algunos errores, Aquí te dejo un ejemplo de tu código de como debe quedar:

function ciclos() {
 var arrayU = new Array(3);
 var f;
 for (f=0;f<arrayU.length;f++) { // ARRAY LENGTH = 3 = FOR = 0, 1 , 3
  var v = prompt('Ingresa los 3 valores a multiplicar:','');
  arrayU[f] = parseInt(v);
 }
 var total = 1;
 //var multiplicacion;
 //var number;
 for (f=0;f<arrayU.length;f++) {
  total = arrayU[f] * total;
 }
 c = document.getElementById('total');
 c.innerHTML = total;
}

function color(opcion) {
 c = document.getElementById('total');
 c.style.color = opcion;
}
<!DOCTYPE html>
<html>
<head>
<title>Javascript Learning</title>
<script type="text/javascript" src="main.js"></script>
</head>
<body>

<input type="button" value="Multiplicacion DE VALORES MEDIANTE CICLOS, ARRAYS Y ACUMULADOR" onClick="ciclos();"/>

<b>La multiplicación de los valores es: </b><b id="total"></b>

<select onchange="color(this.value)">
<option value="red">Rojo</option>
<option value="blue">Azul</option>
<option selected value="green">Verde</option>

</select>

</body>
</html>

2
  • esto era lo que necesitaba ,gracias ,pero podrías explicarme por qué repites c = document.getElementById('total'); y en la funcion del color como en la funcion ciclos y no repites el c.innerHTML = total;, asi para entender :) , gracias
    – ESCM
    Commented el 25 abr. 2017 a las 1:56
  • Me contenta que haya sido lo que necesitabas, como veras la repetición de c = document.getElementById('total') se produce en funciones diferentes, y por no ser variables globales tengo que repetirlas, y recuerda, califica la respuesta que mas se adecua a tus requerimientos.
    – fwBasic
    Commented el 25 abr. 2017 a las 2:36
1

Tienes una llave fuera de lugar luego de llamar la función color();

color();



} // Esta es la llave que está de más

Debes de quitarla y colocarla en la función ciclos que por consiguiente se había quedado abierta.

for (f=0;f<arrayU.length;f++) {
    total = arrayU[f] * total;
}
} // Esta es la llave reubicada

Lo siguiente es que necesitas declarar la a como global para que sea visible a las demás funciones, o de otra manera te arrojará un error al cargar la página. También es necesario que coloques el tag del script justo antes de cerrar el body, luego de todos los elementos, porque el script hace referencias a elementos que aún no han sido cargados.

total = 1; // aquí tenemos a total como una variable global
function ciclos() {

  var arrayU = new Array(3);
  var f;
  for (f=0;f<arrayU.length;f++) { // ARRAY LENGTH = 3 = FOR = 0, 1 , 3
    var v = prompt('Ingresa los 3 valores a multiplicar:','');
    arrayU[f] = parseInt(v);
  }

  //var multiplicacion;
  //var number;
  for (f=0;f<arrayU.length;f++) {
     total = arrayU[f] * total;
    }
  }
1

Segun observo tienes un par de llaves en mala posicion y esto esta produciendo un llamado de la funcion "color" dentro de la primera funcion, al arreglar las llaves se soluciona gran parte del problema.

function ciclos() {

  var arrayU = new Array(3);
  var f;
  for (f=0;f<arrayU.length;f++) { // ARRAY LENGTH = 3 = FOR = 0, 1 , 3
    var v = prompt('Ingresa los 3 valores a multiplicar:','');
    arrayU[f] = parseInt(v);
  }
  var total = 1;
  //var multiplicacion;
  //var number;
  for (f=0;f<arrayU.length;f++) {
  total = arrayU[f] * total;
  c = document.getElementById('total');
      c.innerHTML = total;
  }
}

function color(opcion) {    
     this.value = opcion;
     c = document.getElementById('total');

     if (opcion == 'azul') { c.style.color = "blue"; }
     else if(opcion == 'verde'){ c.style.color = "green";   }
     else {c.style.color = "red";}
}

La parte de HTML quedaria identica.

<input type="button" value="Multiplicacion DE VALORES MEDIANTE CICLOS, ARRAYS Y ACUMULADOR" onClick="ciclos();"/>

<b>La multiplicación de los valores es: </b><b id="total"></b>

<select onchange="color(this.value)">
  <option value="rojo">Rojo</option>
  <option value="azul">Azul</option>
  <option selected value="verde">Verde</option>    
</select>
1
  • Gracias también funciona perfecto
    – ESCM
    Commented el 25 abr. 2017 a las 14:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.