У меня есть кнопки, которые берут текст кнопки из атрибутов, и они работают нормально. Слушатель щелчков работает как задумано.
Однако, когда я добавляю слушателя для mousover и innerhtml новый текст кнопки, они перестают работать частично. (При нажатии работают только внешние края кнопок)
Я думаю, что я сузил его до элемента <span>
, который я также добавляю, но я не уверен, как не дать ему сломать кнопку.
Кнопка отлично работает со следующим кодом:
if (buttonText){
buttonText = payButtons.getAttribute("button-text");
} else {
buttonText = "Support This Site";
}
payButtons.innerHTML = "<span>"+buttonText+"</span>";
Кнопка активируется только по ее внешним краям со следующим кодом:
if (buttonText){
buttonText = payButtons.getAttribute("button-text");
payButtons.addEventListener("mouseover", mouseover);
} else {
buttonText = "Support This Site";
}
payButtons.innerHTML = "<span>"+buttonText+"</span>";
function mouseover()
{
buttonText = this.getAttribute('amount') + " " + this.getAttribute('amount-type');
this.innerHTML = "<span>"+buttonText+"</span>";
}
Можно ли что-нибудь сделать, кроме полного удаления этой функциональности?
Демонстрация кнопок в режиме реального времени (первая кнопка, вверху слева): https://jsfiddle.net/0ctpbuzx/6/