BananaMaster

8 - Input value ( type number ) в JavaScript ( += )

Если что то забыли кликни для перехода на урок

Task 1.

Создайте две переменных y1 = 6, y2 = 3. Создайте div, класс присвойте самостоятельно, выведите в него сумму y1 на y2.

Task 2.

Создайте div c текстом 'Hello' и классом .out-2. С помощью innerHTML допишите внутрь текст "Master". В итоге у вас должно получиться: Hello Master. (Используйте сокращённую запись)

Task 3.

Создайте input и кнопку. По нажатию на кнопку выполняется функция, которая выводит на страницу число, которое ввел пользователь умноженное на 10.

Input i-3

Task 4.

Создайте input, кнопку и пустой div с классом .out-4. По нажатию на кнопку выполняется функция, которая выводит на страницу в div новый тег <h1> с текстом, который ввёл пользователь (<h1>Text Input</h1>). Для решения вам нужно будет использовать склеивание строк ('<h1>' + ...).

Input i-4

Task 5.

Создайте два input с type="number", в которые пользователь может ввести числа. При нажатии на кнопку должна выполняться функция, которая выводит на страницу сумму введённых чисел.

Input i_5_1
Input i_5_2

Task 6.

Создайте input, кнопку и пустой div с классом .out-6. Пользователь вводит текст в input. При нажатии на кнопку выполняется функция, которая добавляет в div новый тег <p> с введённым текстом (<p>Text Input</p>). Для решения используйте склеивание строк ('<p>' + ...) и сокращённую запись. Важно: текст должен именно добавляться. Если нажать на кнопку несколько раз, каждый раз должен добавляться новый текст.

Input i-6

Task 7.

Создайте input и кнопку. По нажатию на кнопку выполняется функция, которая выводит на страницу в div число, которое ввел пользователь и к нему добавленное число 10.

Подсказка, обратите внимание на тип данных

Input

Task 8.

Создайте input, кнопку и пустой список <ul> с классом .out-8. Пользователь вводит текст в input. При нажатии на кнопку выполняется функция, которая создаёт новый тег <li> с введённым текстом и добавляет его в список. Для решения используйте склеивание строк ('<li>' + ...) и сокращённую запись. Важно: каждый новый клик добавляет новый элемент в список.

Input i-8

Task 9.

Создайте input с type="number" и кнопку с текстом 1. По нажатию на кнопку выполняется функция, которая добавляет к тексту кнопки цифру, введённую пользователем. Если нажать на кнопку несколько раз, каждый раз к уже изменённому значению должна добавляться новая цифра.

Подсказка, обратите внимание на тип данных

Input

Task 10.

Получите c помощью querySelector тег body ( querySelector('body') ). С помощью innerHTML присвойте ему пустую строку (...innerHTML = ''). Изучите что произошло.