на ровном месте внезапно случилась js.прострация:
оба способа выделения элемента не работают - кнопка не окрашивается в красный и онклик не навешивается
<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title></title><style type="text/css" id="">
.класс
   {  display: block;
      width: 80px;
      height: 50px;
      border-radius: 25px;
      border: 3px solid #a7a7a7;
   }
</style><script type="text/javascript"> "use strict";
         var x = контейнер.querySelector('#имя');       // "контейнер" не определен
         var x = document.getElementById('имя');        // х === null
         x.style.background = 'red'; 
         x.onclick = function(){alert(9);};
</script> </head><body>
                        <div id='контейнер'>
                        <span id='имя' class='класс'></span>
                        </div>   
</body></html>