Добавление кнопки к элементу и изменение его атрибутов

#javascript #dom #button #event-handling

#javascript #dom #кнопка #обработка событий

Вопрос:

Эй, ребята, я создаю небольшое приложение для электронной почты в качестве личного проекта для себя, и у меня возникла проблема, когда я добавляю элемент button в div с помощью Javascript.

По-видимому, кнопка отображается, но она почти невидима.

Итак, я попытался изменить его значение на «Архив», но он остается всего лишь небольшим фрагментом кнопки, который я едва вижу.

Как я могу изменить значение кнопки с помощью javascript?

Спасибо! Ниже приведен мой код:

 fetch('/emails/'   id)
  .then(response => response.json())
  .then(email => {
    
    document.getElementById("message-view").innerHTML = "From: "   email.sender   "<p>To: "   email.recipients   "</p>"   "<p>Sent at: "   email.timestamp   "<p>Subject: "   email.subject   "</p>"   "<p>"   email.body   "</p>";
    const archiveButton = element.appendChild(document.createElement('button'));
    archiveButton.value = "Archive";
  });
  

Комментарии:

1. Проверьте свой CSS на button .

Ответ №1:

value Атрибут не задает содержимое кнопки. textContent Вместо этого используйте атрибут : archiveButton.textContent = "Archive"

Ответ №2:

Атрибут value работает с тегами ввода

Пример :

 <input type="button" value="Click Me">
  

В этом случае это сработало
бы, но если бы у вас было:

 <button> Click Me </button>

  

Это не сработает.

Вам придется использовать textContent или innerText

Пример :

 const button = document.querySelector("button")
button.textContent = "Archive"