I can not understand why the click does not work exactly on the body. if there was a mistake, then when clicking on the block, it would not work either ...

var bodyClick = document.body; var wrapper = document.getElementById('wrapper'); bodyClick.style.backgroundColor = 'yellow'; wrapper.addEventListener('click', function() { wrapper.style.backgroundColor = (wrapper.style.backgroundColor !== 'red') ? wrapper.style.backgroundColor = 'red' : wrapper.style.backgroundColor = 'white'; }) bodyClick.addEventListener('click', function() { bodyClick.style.backgroundColor = (bodyClick.style.backgroundColor !== 'yellow') ? bodyClick.style.backgroundColor = 'yellow' : bodyClick.style.backgroundColor = 'green'; }) 
 <div id="wrapper">Block</div>

    1 answer 1

    The script is correct, but the size of the body is not. Added css:

     var bodyClick = document.body; var wrapper = document.getElementById('wrapper'); bodyClick.style.backgroundColor = 'yellow'; wrapper.addEventListener('click', function() { wrapper.style.backgroundColor = (wrapper.style.backgroundColor !== 'red') ? wrapper.style.backgroundColor = 'red' : wrapper.style.backgroundColor = 'white'; }) bodyClick.addEventListener('click', function() { bodyClick.style.backgroundColor = (bodyClick.style.backgroundColor !== 'yellow') ? bodyClick.style.backgroundColor = 'yellow' : bodyClick.style.backgroundColor = 'green'; }) 
     html { height: 100%; } body { min-height: 100%; margin: 0; padding: 8px; box-sizing: border-box; } 
     <div id="wrapper">Block</div>