document.body.innerHTML += arr; - сбрасывает все обработчики событий. Т.к. innerHTML += something не инкрементирует а заменяет на текущий контент + something. Следовательно ни var input = document.querySelector(".input");, ни var button = document.querySelector(".button"); уже не существует.
сделать так, чтобы 2-ая начала выполняться только тогда, когда первая закончилась
<br><button id="b1">Botton1</button>
<br><button id="b2">Botton2</button>
<style>
button {
transition-property: background-color;
transition-duration: 3s;
}
</style>
<script>
function repaint(id){
let el=document.getElementById(id);
if(!el.style.backgroundColor){ el.style.backgroundColor = 'red'; return;}
if(el.style.backgroundColor === 'red'){ el.style.backgroundColor = 'blue'; return;}
if(el.style.backgroundColor === 'blue'){ el.style.backgroundColor = 'red'; return;}
}
window.addEventListener('load', ()=>{
repaint('b1');
});
document.getElementById('b1').addEventListener('transitionend', ()=>{
repaint('b2');
});
document.getElementById('b2').addEventListener('transitionend', ()=>{
repaint('b1');
});
</script>
setInterval(one.move, 100)setInterval(function(){ one.move(); }, 100)виртуальный dom это тот, что создан в js созданием элементов и изначально не предусмотрен кодом в html и cssДа, например
var virtualElement = { name: 'span', attrs: [], children: [] };если написать весь сайт на js, он будет быстрее?Зависит от деталей.
body {
overflow-x: hidden;
}