Блог

Я создал кнопку, которая, надеюсь, разрешает отправку только после нажатия на нее (здесь код).

1. InnerHTML Представляет ли использование угрозу безопасности? (Я смотрел онлайн-курс, которого InnerHTML следовало избегать)

2. Когда я отключаю указатели / курсоры, кажется, что кнопки сбрасываются CSS , и мне приходится снова вводить inline CSS для кнопки Javascript . Почему это так?

   Результаты

     function change_button() {
   document.getElementById('get-results').innerHTML = 'Processing....';
   document.getElementById('get-results').style.cssText = 'pointer-events:none !important;cursor:not-allowed !important; height: 44px; color:#fff; font-size:18px; padding: 9px 20px; background-color: #000; display:inline-block; padding-right: 20px;'
   }
     

Вероятно, лучше просто установить для кнопки значение disabled, что должно предотвратить дальнейшие нажатия, и вам также не нужно будет возиться с вашим CSS. Как упоминалось в комментариях, ваш текущий код стирает существующие стили, примененные к кнопке.

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

Что касается рисков безопасности, связанных с использованием innerHTML, я не знаю ни о каких в этом случае… Можете ли вы подробнее рассказать о том, какие риски вас беспокоят?

Кстати, передача ссылки на «this» в вашем onclick дает вам простой способ ссылаться на нажатую кнопку без необходимости использовать getElementById .

 function change_button(btn) {
  btn.disabled = true;
  btn.innerHTML = "Processing...";
}  

 <button type="button" onclick="change_button(this);" style="cursor: pointer; height: 44px; color:#fff; font-size:18px; padding: 9px 20px; background-color: #000; display:inline-block; padding-right: 20px;" id="get-results">Results</button>