0

Tengo el siguiente codigo, si pinchas en el boton nombre muestra el nombre elegido, pero al pinchar en apellido solo muestra el apellido elegido. ¿Como hago para que al mostrar el apellido se concatene al nombre y no lo sustituya? Gracias

<html>
        <head>
            <script type="text/javascript">
                function nombre(){
                    var name = prompt("Nombre");
                    document.getElementById("result").innerHTML = name;
                }
                function apellido(){
                    var ape = prompt("Apellido");
                    document.getElementById("result").innerHTML = ape;
                }
                function restart(){
                    document.getElementById("result").innerHTML = "";
                }
            </script>
        </head>
        <body>
            <p id="botones">
                <input id="bot" type="button" value="Nombre" onclick="nombre()"/>
                <input id="bot" type="button" value="Apellido" onclick="apellido()" />
                <input id="bot" type="button" value="Reiniciar" onclick="restart()"/>
            </p>
            <p id="result"></p>
        </body>
    </html>

3 respuestas 3

1

Estás usando = en ambos casos, y por eso te lo va a sustituir siempre. Por lo tanto, debes usar += para agregar el nuevo contenido a lo que ya existe.

Aparte de eso, falta refinar la lógica de tu código y aplicar buenas prácticas:

  • Conviene crear referencias a los elementos reutilizables fuera de las funciones, de ese modo evitas una llamada constante a document.getElementById
  • Conviene evitar que se inserte el apellido antes que el nombre. Para eso ponemos el botón de apellido desactivado por defecto, lo activamos dentro de la función que recoge el nombre y lo desactivamos de nuevo en el reset.
  • En la concatenación de apellido agregamos un espacio en blanco, para que no queden juntos.
  • Otro error que tenías es que repetías ids en el HTML. Esto, aunque no es un error visible, produce un HTML inválido, porque dos elementos nunca deben tener el mismo id.

var elResult=document.getElementById("result");
var elLastName=document.getElementById("btnLastName");

function nombre() {
  var name = prompt("Nombre");
  elResult.innerHTML += name;
  elLastName.disabled = false;
}

function apellido() {
  var ape = prompt("Apellido");
  elResult.innerHTML  +=` ${ape}`;
}

function restart() {
  elResult.innerHTML = "";
  elLastName.disabled = true;
}
<p id="botones">
  <input id="btnName" type="button" value="Nombre" onclick="nombre()" />
  <input id="btnLastName" type="button" value="Apellido" onclick="apellido()" disabled />
  <input id="btnReset" type="button" value="Reiniciar" onclick="restart()" />
</p>
<p id="result"></p>

1

Una forma sencilla seria simplemente manteniendo lo que tienes y en la funcion apellidos utilizar += en vez de =... pues no estas adicionando un valor.. estas asignando uno nuevo cada vez que das click en el boton.. en la misma funcion de apellido puedes formatear un poco en caso de que no tengas un nombre insertado y no quieras tener el espacio, etc..

 function apellido(){
    var ape = prompt("Apellido");
    document.getElementById("result").innerHTML += ' '+ape;
 }
0
function nombre(){
                var name = prompt("Nombre");
                document.getElementById("result").innerHTML = name;
            }
            function apellido(){
                var ape = prompt("Apellido");
                document.getElementById("result").innerHTML = ape;
            }
            function restart(){
                document.getElementById("result").innerHTML = "";
            }

Lo que tu haces es cambiar cada vez en contenido sobrescribiendolo por lo que prueba poner que te saque el ape+ el nombre

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.