JavaScript - как создать кнопку и добавить атрибут onclick?

Question

JavaScript - как создать кнопку и добавить атрибут onclick?

Богдан Васильевич Ученик (110), на голосовании 1 месяц назад

 const element6 = document.createElement('button'); 
element6.innerText = 'Close';
document.getElementById(div2.id).appendChild(element6);

Где и как функцию объявить? Уже пытался всё это добавить, но это не работало, то ли атрибут, то ли функция неправильная

Answer 1

Проверить существуют ли такие ID. В целом скрипт должен работать

Answer 2

Найпростейший пример

 let myBtn = document.createElement('input'); 
myBtn.type = 'button'; 
myBtn.value = 'Click me'; 
myBtn.onclick = () => { alert('You CLICKED me!!!'); } 
document.body.appendChild(myBtn);

Вариант с объединением в отдельную функцию

 function createButton(caption, onclick, placeto) 
{ 
  let newButton = document.createElement('input'); 
  newButton.type = 'button'; 
  newButton.value = caption; 
  newButton.onclick = onclick; 
  placeto.appendChild(newButton); 
} 
 
createButton('Click Me!', () => { alert('You CLICKED me!'); }, document.body);

Answer 3

канвас Ученик (191) 2 месяца назад

element6.addEventListener('onclick', (e) => { ... })

Answer 4

Чтобы создать кнопку и добавить ей атрибут onclick в JavaScript, вы можете сделать это следующим образом:

Создайте кнопку.
Добавьте текст в кнопку.
Добавьте атрибут onclick с функцией, которую хотите вызвать при нажатии на кнопку.
Добавьте кнопку в нужный элемент на странице.
Вот пример кода, который демонстрирует этот процесс:

 // Создаем кнопку 
const element6 = document.createElement('button'); 
element6.innerText = 'Close'; 
 
// Объявляем функцию, которая будет вызываться при нажатии на кнопку 
function handleClick() { 
    alert('Button was clicked!'); 
} 
 
// Добавляем атрибут onclick к кнопке 
element6.onclick = handleClick; 
 
// Добавляем кнопку в элемент с id 'div2' 
const div2 = document.getElementById('div2'); 
div2.appendChild(element6);

В этом примере:

Мы создаем кнопку с текстом "Close".
Объявляем функцию handleClick, которая будет вызываться при нажатии на кнопку.
Добавляем атрибут onclick к кнопке, присваивая ему функцию handleClick.
Находим элемент с id div2 и добавляем кнопку в этот элемент.
Убедитесь, что элемент с id div2 существует в вашем HTML-документе. Вот пример HTML-структуры:

  
 
 
     
     
    Button Example

Если у вас возникают ошибки, убедитесь, что:

Элемент с id div2 существует в вашем HTML.
Скрипт подключен правильно и выполняется после загрузки HTML.
Функция handleClick объявлена и присвоена атрибуту onclick правильно.