3

Soy algo nuevo en esto y estoy tratando de aprender. Agradecería mucho si me explicaran porque al darle click al boton aparece el mensaje de su edad pero en otra parte. Yo lo que quiero es que me aparezca pero abajo de lo que viene en el HTML.

var añoActual = 2021;
var edad;
var datoUsuario = document.getElementById("datoAñoNacimiento");
var boton = document.getElementById("botoncito");
boton.addEventListener("click", edadActual);

function edadActual() {
  datoUsuario = parseInt(datoUsuario.value);
  edad = añoActual - datoUsuario;
  document.write("Tu edad es de " + edad + " años.");
}
<html>

<head>
  <title>¿Cuál es tu edad?</title>
</head>

<body>
  <h1>
    Bienvenido usuario!!
  </h1>
  <h4>
    Para saber su edad ingrese lo que se le solicite.
  </h4>
  <p>¿Cuál es tu año de nacimiento?
    <input type="text" id="datoAñoNacimiento" />
    <input type="button" value="click" id="botoncito" />
  </p>
  <script src="edad.js"></script>
</body>

</html>

1
  • 3
    Aunque sé que no tiene nada que ver con la pregunta, evita document.write, ya que en algunos casos puede entrar en conflicto con una extensión instalada y también usar este método es considerado una mala práctica en SEO.
    – Rodrigo
    Commented el 31 mar. 2021 a las 22:30

1 respuesta 1

5

El problema que tienes es que document hace referencia TODO tu HTML, entonces cuando haces document.write estas reescribiendo todo tu HTML y se reemplaza lo que ya tienes, una solución sería crear un espacio vacío con un id específico el cual vas a rellenar con la nueva información.

var añoActual = 2021;
var edad;
var datoUsuario = document.getElementById("datoAñoNacimiento");
var boton = document.getElementById("botoncito");
var contenedorEdad = document.getElementById("edad");
boton.addEventListener("click", edadActual);

function edadActual() {
  datoUsuario = parseInt(datoUsuario.value);
  edad = añoActual - datoUsuario;
  contenedorEdad.innerText = "Tu edad es de " + edad + " años.";
}
<html>

<head>
  <title>¿Cuál es tu edad?</title>
</head>

<body>
  <h1>
    Bienvenido usuario!!
  </h1>
  <h4>
    Para saber su edad ingrese lo que se le solicite.
  </h4>
  <p>¿Cuál es tu año de nacimiento?
    <input type="text" id="datoAñoNacimiento" />
    <input type="button" value="click" id="botoncito" />
  </p>
  <p id="edad"> </p>
  <script src="edad.js"></script>
</body>

</html>

En este caso creo un nuevo elemento de tipo p vacío, el cuál tiene el id edad, guardo su referencia en una variable llamada contenedorEdad y edito su texto interno con el atributo innerText del mismo. Otra posible solución es crear el elemento con los datos que necesitas y luego añadirlo a tu HTML.

Por cierto, date una vuelta por el recorrido y obtén tu primera medalla!

2
  • 1
    wow gracias encerio. Lo voy a checar :) Commented el 31 mar. 2021 a las 22:20
  • 2
    La mejor manera de dar las gracias en SO es marcar la respuesta como aceptada, @EdsonEduardoSánchezAlvarez! No solo recompensas al autor de la respuesta con 15 de reputación, si no que también haces que la respuesta sea más visible para otras personas que puedan tener una duda similar.
    – Benito-B
    Commented el 31 mar. 2021 a las 22:24

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.