Foros del Web » Programando para Internet » Javascript »

Botón con function() sólo se aplica al primer elemento y no a todos!!!

Estas en el tema de Botón con function() sólo se aplica al primer elemento y no a todos!!! en el foro de Javascript en Foros del Web. Hola! Quisiera saber por qué la función de mi botón sólo se aplica al primer elemento y no a todo el resto. Es un simple ...
  #1 (permalink)  
Antiguo 25/01/2015, 12:40
 
Fecha de Ingreso: junio-2009
Mensajes: 28
Antigüedad: 15 años, 5 meses
Puntos: 0
Exclamación Botón con function() sólo se aplica al primer elemento y no a todos!!!

Hola! Quisiera saber por qué la función de mi botón sólo se aplica al primer elemento y no a todo el resto.
Es un simple traductor de ejemplo. Se ingresa una palabra en ingles y su traducción al castellano. Y se guarda en localStorage.
En otra página se listan todas las palabras ingresadas con su traducción.
El problema está en la segunda página (lista de palabras):
¿Porqué los botones guardar y eliminar sólo se aplican al primer elemento y no al resto?
PD: Por alguna razón cuando se guarda una modificación desaparece el texto y hay que actualizar la página para ver los cambios, y cuando se presiona "Eliminar" no pasa nada hasta que se actualiza la página.

Les paso el código:

::::::::::::::::::HTML para agregar nuevos elementos:::::::::::::::::::::::::::

<!DOCTYPE HTML>
<html>
<head>
<title>Agregar</title>

<script>

window.addEventListener('load', inicio, false);

function inicio() {
document.getElementById('guardar').addEventListene r('click', guardar, false);
}

function guardar(evt) {
localStorage.setItem(document.getElementById('ingl es').value, document.getElementById('castellano').value);
document.getElementById('ingles').value='';
document.getElementById('castellano').value='';
}


</script>

</head>
<body>
Palabra en ingles:
<input type="text" id="ingles">
<br>
Palabra en castellano:
<input type="text" id="castellano">
<br>
<input type="button" id="guardar" value="Guardar">
</body>
</html>

::::::::::::::::::::HTML para listar elementos ingresados y poder modificarlos o eliminarlos individualemnte:::::::::::::::::::::::

<!DOCTYPE HTML>
<html>
<head>
<title>Listado</title>

<script>

window.addEventListener('load', inicio, false);

function inicio() {
document.getElementById('guardar').addEventListene r('click', guardar, false);
}

function guardar(evt) {
localStorage.setItem(document.getElementById('ingl es').value, document.getElementById('castellano').value);
document.getElementById('ingles').value='';
document.getElementById('castellano').value='';
}

for (x=0; x<=localStorage.length-1; x++) {
clave = localStorage.key(x);
document.write("La clave " + "<input type='text' id='ingles' value='" + clave + "'>" + " contiene el valor " + "<input type='text' id='castellano' value='" + localStorage.getItem(clave) + "'>" + "<br />");
}
function func_elim(){
localStorage.removeItem(document.getElementById('i ngles').value);
}

</script>



</head>
<body>
<br>
<input type="button" id="guardar" value="Guardar">
<input type="button" value='Eliminar' onClick="func_elim();"/>
</body>
</html>
  #2 (permalink)  
Antiguo 25/01/2015, 13:27
Avatar de jsstoni  
Fecha de Ingreso: enero-2015
Ubicación: Maracaibo
Mensajes: 82
Antigüedad: 9 años, 10 meses
Puntos: 4
Respuesta: Botón con function() sólo se aplica al primer elemento y no a todos!!!

los id deben ser unico no puedes aplicar el mismo id a varios elementos no es adecuado.
__________________
Desarrollo web Front End Realtime NodeJs
  #3 (permalink)  
Antiguo 25/01/2015, 15:10
 
Fecha de Ingreso: junio-2009
Mensajes: 28
Antigüedad: 15 años, 5 meses
Puntos: 0
Respuesta: Botón con function() sólo se aplica al primer elemento y no a todos!!!

Hola jsstoni. Hice como me dijiste, cambiar las id por clases a los inputs menos los botones, y otra prueba usando clases en todos los elementos incluido los botones. Pero ninguna forma funcionó.
El código en sí funciona bien, pero sólo se aplica al primer "renglón" digamos, la primer palabra. Al resto no permite eliminarlas o modificarlas.

Paso de nuevo el código HTML del listado porque creo que se copió mal:

<!DOCTYPE HTML>
<html>
<head>
<title>Listado</title>

<script>

window.addEventListener('load', inicio, false);

function inicio() {
document.getElementById('guardar').addEventListene r('click', guardar, false);
}

function guardar(evt) {
localStorage.setItem(document.getElementById('ingl es').value, document.getElementById('castellano').value);
document.getElementById('ingles').value='';
document.getElementById('castellano').value='';
}

for (x=0; x<=localStorage.length-1; x++) {
clave = localStorage.key(x);
document.write("La clave " + "<input type='text' id='ingles' value='" + clave + "'>" + " contiene el valor " + "<input type='text' id='castellano' value='" + localStorage.getItem(clave) + "'>" + "<br />");
}
function func_elim(){
localStorage.removeItem(document.getElementById('i ngles').value);
}

</script>



</head>
<body>
<br>
<input type="button" id="guardar" value="Guardar">
<input type="button" value='Eliminar' onClick="func_elim();"/>
</body>
</html>

Etiquetas: elemento, function, html, input, primer, valor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:30.