JavaScript помогите сделать дз

Question

JavaScript помогите сделать дз

Вова Спесивцив Ученик (229), на голосовании 1 год назад

Из JavaScript создайте страницу с полем для ввода и пустым h2-элементом. Введённый в поле текст должен отображаться внутри h2-элемента. ( Доп. задание: текст должен отображаться с задержкой в 300ms.) Из JavaScript создайте страницу с кнопкой. Через Java Script добавьте на кнопку надпись “1”. При каждом нажатии на кнопку число должно увеличиваться на 1. Из JavaScript создайте страницу с квадратным блоком. При нажатии на блок он должен превращаться в круг. При повторном нажатии снова становиться квадратом. помогите с работой

Answer 1

EVK IT Сервис К Мыслитель (5236) 1 год назад

Что уже сделано, покажи

Answer 2

300 милисекунд это меньше секунды, такая задержка слишком мала чтобы ее заметить. Полагаю имелись в виду 3000 мс, то есть 3 секунды

Answer 3

 // Первая часть задания 
 
const h2 = document.createElement('h2'); 
const input = document.createElement('input'); 

input.type = 'text';
 
document.body.append(h2,input); 
 
input.addEventListener('keyup', (event) => { 
   setTimeout(() => h2.textContent = event.target.value, 300); 
})

 // Вторая часть задания 
 
const button = document.createElement('button'); 

button.textContent = '1'; 
 
document.body.append(button); 
 
button.addEventListener('click', (event) => { 
   event.target.textContent = +event.target.textContent + 1; 
})

 // Третья часть задания 
 
const block = document.createElement('div'); 
 
block.style.width = '500px'; 
block.style.height = '500px'; 
block.style.borderRadius = '0px'; 
block.style.background = 'red'; // иначе фигуру не видно на белом фоне
 
document.body.append(block); 
 
block.addEventListener('click', (event) => { 
   if (event.target.style.borderRadius === '0px') { 
      event.target.style.borderRadius = '50%'; 
   } else { 
      event.target.style.borderRadius = '0px';  
   } 
})

 // второй вариант для третьего задания

const block = document.createElement('div'); 
const style = document.createElement('style'); 
const cls = '.square { width: 500px; height: 500px; background: red; }\n.square.active { border-radius: 50%; }';
 
block.className = 'square';
 
style.append(cls); 
document.head.append(style); 
document.body.append(block);
 
block.addEventListener('click', (event) => { 
   event.target.classList.toggle('active'); 
})