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>
