freeCodeCamp

2.5 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7fad367417b2b2512be2	Change Text with click Events	6		Cambiar texto con click eventos

Description

Cuando ocurre el evento de clic, puede usar JavaScript para actualizar un elemento HTML. Por ejemplo, cuando un usuario hace clic en el botón "Obtener mensaje", cambia el texto del elemento con el message clase para que diga "Aquí está el mensaje". Esto funciona agregando el siguiente código dentro del evento click: document.getElementsByClassName('message')[0].textContent="Here is the message";

Instructions

Agregue código dentro del controlador de eventos onclick para cambiar el texto dentro del elemento del message para que diga "Aquí está el mensaje".

Tests

tests:
  - text: Su código debe usar el método <code>document.getElementsByClassName</code> para seleccionar el elemento con <code>message</code> clase y establecer su <code>textContent</code> de <code>textContent</code> en la cadena dada.
    testString: 'assert(code.match(/document\.getElementsByClassName\(\s*?("|")message\1\s*?\)\[0\]\.textContent\s*?=\s*?("|")Here is the message\2/g), "Your code should use the <code>document.getElementsByClassName</code> method to select the element with class <code>message</code> and set its <code>textContent</code> to the given string.");'

Challenge Seed

<script>
  document.addEventListener('DOMContentLoaded',function(){
    document.getElementById('getMessage').onclick=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">
  The message will go here
</p>
<p>
  <button id="getMessage">
    Get Message
  </button>
</p>

Solution

// solution required

2.5 KiB Raw Blame History