BananaMaster

8 - Input value (type="number") en JavaScript (+=) | Lecciones JS

Si olvidaste algo — haz clic para ir a la lección.

Tarea 1.

Crea dos variables: y1 = 6 e y2 = 3. Crea un div (asigna cualquier clase) y muestra la suma de y1 e y2 dentro de él.

Tarea 2.

Crea un div con el texto "Hello" y la clase .out-2. Usando innerHTML, agrega el texto "Master" dentro de él. El resultado final debe ser: Hello Master. (Usa la sintaxis abreviada)

Tarea 3.

Crea un input y un botón. Al hacer clic en el botón, muestra en la página el número introducido por el usuario multiplicado por 10.

Input i-3

Tarea 4.

Crea un input, un botón y un div vacío con la clase .out-4. Al hacer clic, muestra un nuevo elemento <h1> dentro del div con el texto del input (p.ej. <h1>Texto</h1>). Usa concatenación de cadenas ('<h1>' + ...).

Input i-4

Tarea 5.

Crea dos inputs con type="number". Al hacer clic en el botón, muestra la suma de los valores introducidos.

Input i_5_1
Input i_5_2

Tarea 6.

Crea un input, un botón y un div vacío con la clase .out-6. El usuario escribe texto en el input. Al hacer clic, agrega un nuevo elemento <p> con ese texto al div. Importante: el texto debe añadirse, no reemplazarse. Cada clic agrega una nueva línea.

Input i-6

Tarea 7.

Crea un input y un botón. Al hacer clic, muestra el número introducido por el usuario más 10 en un div.

Pista: presta atención al tipo de dato.

Input

Tarea 8.

Crea un input, un botón y un <ul> vacío con la clase .out-8. El usuario escribe texto en el input. Al hacer clic, crea un nuevo <li> con ese texto y agrégalo a la lista. Usa concatenación de cadenas. Cada clic debe agregar un nuevo elemento.

Input i-8

Tarea 9.

Crea un input con type="number" y un botón con el texto "1". Al hacer clic, agrega el dígito introducido al texto del botón. Cada clic debe continuar añadiendo al valor actualizado.

Pista: presta atención al tipo de dato.

Input

Tarea 10.

Selecciona el elemento <body> usando querySelector ('body'). Luego establece su innerHTML como una cadena vacía (...innerHTML = ''). Observa lo que sucede.