Buenas noches. A ver si me podéis ayudar con algo sencillito (supongo). Estoy con mis primeros pasos y se me artasca un poco el planteamiento.
Veamos, quiero que al pinchar sonre un <a href=...> dentro de un campo input se imprima un valor. Al pinchar sobre otro cambie a nuevo valor etc. Esta es la esencia.
Ahora os pongo lo qu eestoy realizando y llego hasta el punto de imprimir en el input el valor del title del <a href> pero no del segundo. Lo hago mediante getElementById. Como os decía, estoy muy verde, pero ganas no me faltan.
El script que utilizo es el siguiente:
function llenarInput(){
var valor_color = document.getElementById('caja-color');
var valor_atributo = valor_color.getAttribute("title");
inputUno.value = valor_atributo;
La llamada la hago mediante un evento onClick:
<a id="caja-color" class="color" title="Negro" href="javascript
:void(0)" onclick="llenarInput();" style="background: #000 none repeat scroll 0% 0%; opacity: 1;"></a>
<a id="caja-color" class="color" title="Verde" href="javascript
:void(0)" onclick="llenarInput();" style="background: #00851a none repeat scroll 0% 0%; opacity: 1;"></a>
Con esto somo me muestra en el input el texto "Negro" al pinchar sobre el negro y no cambia al pinchar sobre el verde. Hasta cierto punto entiendo que no lo haga ya que el pimer ID es el de negro, pero no encuantro la manera para que funcione.
No se si me expliqué bien ya que mi ignorancia puede que no ayude a expresarme.
Pongo todo el código junto:
<!DOCTYPE html>
<html>
<head>
<title>Cambiar color de una imagen con canvas</title>
<meta charset="utf-8">
<style>
/*LIMPIAR PRUEBAS*/
.caja-colores{ margin-top:10px; padding:0px;}
.caja-colores li{
display: inline-block;
padding-right: 2px;
list-style: none;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
font-size: 0;
height: 0;
visibility: hidden;}
.color_pick {
cursor: pointer;
display: block;
height: 28px;
width: 28px;}
</style>
</head>
<body>
<h2>TEXTO</h2>
<div>
<div><input id="inputUno" type="text" value=""></div>
<div class="" id="todocolores">
<ul class="caja-colores">
<li class="" id="">
<a id="caja-color" class="color_pick" title="Negro Brillo" href="javascript
:void(0)" onclick="llenarInput();" style="background: #000 none repeat scroll 0% 0%; opacity: 1;"></a>
</li>
<li class="">
<a id="caja-color" class="color_pick" title="Verde" href="javascript
:void(0)" onclick="llenarInput();" style="background: #00851a none repeat scroll 0% 0%; opacity: 1;"> </a>
</li>
<li class="">
<a id="caja-color" class="color_pick" title="Amarillo" href="javascript
:void(0)" onclick="llenarInput();" style="background: #fee300 none repeat scroll 0% 0%; opacity: 1;"> </a>
</li>
</ul>
<input class="color_pick_hidden" type="hidden" value="60" name="">
</div>
</div>
<script>
function llenarInput(){
var valor_color = document.getElementById('caja-color');
var valor_atributo = valor_color.getAttribute("title");
inputUno.value = valor_atributo;
}
</script>
</body>
</html>