BananaMaster

8 - Input value (type="number") em JavaScript (+=) | Aulas JS

Se esqueceu algo — clique para ir à aula.

Tarefa 1.

Crie duas variáveis: y1 = 6 e y2 = 3. Crie um div (escolha qualquer classe) e exiba a soma de y1 e y2 dentro dele.

Tarefa 2.

Crie um div com o texto "Hello" e a classe .out-2. Usando innerHTML, adicione o texto "Master" dentro dele. O resultado final deve ser: Hello Master. (Use sintaxe abreviada)

Tarefa 3.

Crie um input e um botão. Quando o botão for clicado, exiba na página o número digitado pelo usuário multiplicado por 10.

Input i-3

Tarefa 4.

Crie um input, um botão e um div vazio com a classe .out-4. Quando o botão for clicado, exiba um novo elemento <h1> dentro do div com o texto digitado pelo usuário (ex.: <h1>Texto</h1>). Use concatenação de string ('<h1>' + ...).

Input i-4

Tarefa 5.

Crie dois inputs com type="number". Quando o botão for clicado, exiba a soma dos valores digitados na página.

Input i_5_1
Input i_5_2

Tarefa 6.

Crie um input, um botão e um div vazio com a classe .out-6. O usuário digita texto no input. Quando o botão for clicado, adicione um novo elemento <p> com esse texto dentro do div (ex.: <p>Texto</p>). Use concatenação e sintaxe abreviada. Importante: o texto deve ser acrescentado, não substituído. Cada clique adiciona uma nova linha.

Input i-6

Tarefa 7.

Crie um input e um botão. Quando clicado, exiba o número digitado pelo usuário mais 10 em um div.

Dica: atenção ao tipo de dado.

Input

Tarefa 8.

Crie um input, um botão e um <ul> vazio com a classe .out-8. O usuário digita texto no input. Quando o botão for clicado, crie um novo elemento <li> com esse texto e adicione à lista. Use concatenação e sintaxe abreviada. Cada clique adiciona um novo item.

Input i-8

Tarefa 9.

Crie um input com type="number" e um botão com o texto "1". Quando o botão for clicado, adicione o dígito digitado pelo usuário ao texto do botão. Cada clique continua acrescentando ao valor atualizado.

Dica: atenção ao tipo de dado.

Input

Tarefa 10.

Selecione o elemento <body> usando querySelector ('body'). Depois, atribua uma string vazia ao seu innerHTML (...innerHTML = ''). Observe o que acontece.