0

Estoy tratando de cambiar el color de fondo de un div desde javascript a traves un select en el cual el cliente ya tiene los colores definidos para cada informe.

function myFunction() {
    document.getElementById("boxColor").style.backgroundColor = "lightblue";
}
#boxColor {
	width: 300px;
	height: 300px;
}
<button onclick="myFunction()">Cambiar color</button>
<br>
<br>
<select id="paleta">
    <option value="FFFFFF">FFFFFF</option>
    <option value="6F8F00">6F8F00</option>
    <option value="53AB00">53AB00</option>
    <option value="37C700">37C700</option>
    <option value="1BE300">1BE300</option>
    <option value="00FF00" selected="selected">00FF00</option>
    <option value="00DF1F">00DF1F</option>
    <option value="00C33B">00C33B</option>
    <option value="00A757">00A757</option>
</select>
<!--p><img id="myDIV" src="banio.png" alt="banio" width="580"></p-->
<p>
<div id="boxColor">
  <h1>Informe 1</h1>
  Estadisticas de ventas Eneno
</div>
</p>

Hasta ahí todo funciona bien, pero no sé como tomas los colores del select y quitar el boton que solo me cambiar un color. Gracias

1 respuesta 1

1

Lo más fácil, sin modificar mucho tu código, es agregar el atributo onchange a la etiqueta select:

<select id="paleta" onchange="myFunction(this.value)">

De esta manera cada vez que selecciones un color, se disparará la función myFunction mandando por parámetro el color seleccionado.

Después, modificas tu función javascript para recibir el parámetro color y aplicarlo al elemento #boxColor.

Al final tu código quedaría así:

function myFunction(color) {
    document.getElementById("boxColor").style.backgroundColor = "#" + color;
}
#boxColor {
	width: 300px;
	height: 300px;
}
<button onclick="myFunction()">Cambiar color</button>
<br>
<br>
<select id="paleta" onchange="myFunction(this.value)">
    <option value="FFFFFF">FFFFFF</option>
    <option value="6F8F00">6F8F00</option>
    <option value="53AB00">53AB00</option>
    <option value="37C700">37C700</option>
    <option value="1BE300">1BE300</option>
    <option value="00FF00" selected="selected">00FF00</option>
    <option value="00DF1F">00DF1F</option>
    <option value="00C33B">00C33B</option>
    <option value="00A757">00A757</option>
</select>
<!--p><img id="myDIV" src="banio.png" alt="banio" width="580"></p-->
<p>
<div id="boxColor">
  <h1>Informe 1</h1>
  Estadisticas de ventas Eneno
</div>
</p>

4
  • Me volví loco, pero muchas gracias...
    – user101604
    el 25 oct. 2018 a las 4:30
  • Disculpa y con <a href="#" onclick="myFunction(this.value)">37C700</a>, donde coloco el valor del color?
    – user101604
    el 25 oct. 2018 a las 4:35
  • 1
    Es diferente, el color no se obtiene de un select, si no de un enlace. En ese caso puedes mandar el código de color directamente de esta forma <a href="#" onclick="myFunction('37C700')">37C700</a>.
    – RockoDev
    el 25 oct. 2018 a las 4:53
  • Claro.... la funcion... muchas gracias!
    – user101604
    el 25 oct. 2018 a las 5:08

Tu Respuesta

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