Ejercicio En grupos

Refactoricen y mejoren el código del piedra papel tijeras ahora que tenemos mejorados nuestros superpoderes

MANIPULACIÓN DEL DOM/HTML

JavaScript y las variables globales

Cuando desarrollamos una web, podemos acceder a unas determinadas variables y funciones que ya están creadas por defecto.

Por ejemplo, cuando usábamos el console.log() o el alert eran funciones globales

Document

var nuestraWeb = document.body;

nuestraWeb.innerHTML = `<h1> Nuevo HTML</h1>`

var mensaje = "Mi nombre";

mensaje = mensaje + ' no es ';

mensaje += 'Miguel';

console.log(mensaje) // Mi nombre no es Miguel

Pausa informativa

innerHTML + getElementById

var results = document.getElementById('results');

var numero = 25;

results.innerHTML += `<p> Nuevo resultado = ${numero}</p>`;

<body>
    <div id="results">
        <h1> Zona de resultados <h1>
        
    </div>
</body>

innerHTML + getElementById

var displaySection = document.getElementById('display');

var username = prompt(`Hola, ¿cómo te llamas?`);

displaySection.innerHTML += `<h1> Bienvenido ${username}</h1>`;

<body>
    <div id="display"></div>
</body>

onClick="metodo()"

<button onClick="peligro()"> ¡ NO ME PULSES !  </button>

function peligro(){
    alert('Peligro !!');
}

onClick="metodo(value)"

<li class="user"
    onClick="userSelected('Pepe')">
    <h2>Pepe</h2>
</li>

function userSelected(username){
    console.log(username);
}

En grupos

Volvemos al piedra papel tijeras

Ahora que sabes imprimir en el DOM usando el innerHTML y ahora que sabes detectar clicks.

¿Te animas a hacer un Piedra Papel y Tijeras con interfaz?

function userSelected(userHTML){
    
    userHTML.style.backgroundColor = 'green';

    userHTML.className += 'selected';

    userHTML.classList.add('selected');

    userHTML.classList.toggle('selected');

}

Changing the style

function userSelected(userHTML){
    
    userHTML.innerText = 'Paco';

    userHTML.innerHTML = '<h1>Paco</h1>';

    // Si fuese un input
    userHTML.value = 'Paco';

}

Changing the content