freeCodeCamp/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d7fad367417b2b2512be1	Maneja los eventos de clic con JavaScript usando la propiedad onclick	6	301503	handle-click-events-with-javascript-using-the-onclick-property

--description--

Quieres que tu código se ejecute solo una vez que la página haya terminado de cargar. Para eso, puedes adjuntar un evento JavaScript al documento llamado DOMContentLoaded. Este es el código que hace esto:

document.addEventListener('DOMContentLoaded', function() {

});

Puedes implementar manejadores de eventos que van dentro de la función DOMContentLoaded. Puedes implementar un manejador de eventos onclick que se activa cuando el usuario hace clic en el elemento con id getMessage, agregando el siguiente código:

document.getElementById('getMessage').onclick = function(){};

--instructions--

Agrega un manejador de eventos de clic dentro de la función DOMContentLoaded para el elemento con id getMessage.

--hints--

Tu código debe utilizar el método document.getElementById para seleccionar el elemento getMessage.

assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g));

Tu código debe agregar un manegador de eventos onclick.

assert(typeof document.getElementById('getMessage').onclick === 'function');

--seed--

--seed-contents--

<script>
  document.addEventListener('DOMContentLoaded', function(){
    // Add your code below this line


    // Add your code above this line
  });
</script>

<style>
  body {
    text-align: center;
    font-family: "Helvetica", sans-serif;
  }
  h1 {
    font-size: 2em;
    font-weight: bold;
  }
  .box {
    border-radius: 5px;
    background-color: #eee;
    padding: 20px 5px;
  }
  button {
    color: white;
    background-color: #4791d0;
    border-radius: 5px;
    border: 1px solid #4791d0;
    padding: 5px 10px 8px 10px;
  }
  button:hover {
    background-color: #0F5897;
    border: 1px solid #0F5897;
  }
</style>
<h1>Cat Photo Finder</h1>
<p class="message box">
  The message will go here
</p>
<p>
  <button id="getMessage">
    Get Message
  </button>
</p>

--solutions--

<script>
  document.addEventListener('DOMContentLoaded', function(){
    // Add your code below this line
    document.getElementById('getMessage').onclick = function(){ };
    // Add your code above this line
  });
</script>

<style>
  body {
    text-align: center;
    font-family: "Helvetica", sans-serif;
  }
  h1 {
    font-size: 2em;
    font-weight: bold;
  }
  .box {
    border-radius: 5px;
    background-color: #eee;
    padding: 20px 5px;
  }
  button {
    color: white;
    background-color: #4791d0;
    border-radius: 5px;
    border: 1px solid #4791d0;
    padding: 5px 10px 8px 10px;
  }
  button:hover {
    background-color: #0F5897;
    border: 1px solid #0F5897;
  }
</style>
<h1>Cat Photo Finder</h1> 
<p class="message box">
  The message will go here
</p>
<p>
  <button id="getMessage">
    Get Message
  </button>
</p>