Как заставить работать этот код в innerHTML?

Question

[Drold]

Привет, есть код который блокирует кнопку после нажатия, а также меняет класс css:
Выглядит так:

<button class="btn" onclick="this.disabled=true;this.className = (this.className == 'btn' ? 'btnss' : 'btn')">111</button>

Но мне его нужно вставить в .innerHTML, так не работает:

document.getElementById("waiting").innerHTML = '<button class=btn onclick=this.disabled=true;this.className = (this.className == 'btn' ? 'btnss' : 'btn')>111</button>';

Как заставить работать его?:)

Answer 1

[trushka]

Кавычки забыли (и экранировать их):

document.getElementById("waiting").innerHTML = "<button class=btn onclick=\"this.disabled=true;this.className = (this.className == 'btn' ? 'btnss' : 'btn'\")>111</button>';

И, кстати, не понимаю, зачем менять класс - другой стиль можно задать с помощью псевдокласса :disabled, а состояние в js проверять по этому же свойству, если надо

Answer 2

[romy4]

вы, походу, не знаете что такое экранирование символов

Answer 3

[Робот]

Не понял зачем так сложно, можно же просто свойство кнопки поменять после клика.
Пример разных свойств:

<input type="button" id="b1" value="Btn 1">
<input type="button" id="b2" value="Btn 2">
<script>
document.getElementById('b1').disabled = false;
document.getElementById('b2').disabled = true;
</script>

UPD вот рабочий пример для вашего вопроса https://jsfiddle.net/rs28qLgd/1/