Untitled

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0" />
<title>javascript 0</title>
<style type="text/css">
    .become {
    background-color: yellow;
    font-size:4em;
   }
    .become1 {background-color:red;
    width:4em; }

    .become2{background-color: purple;
    width:6em; }

    .become3{background-color: green}
    .wow {
    .ba}

    #one {
    transition:1s;}
    #two:hover {
    background-color:silver;}

    </style>


</head>
<body>

<div id="tv">
        <p id="one" class="become">lorem</p>
        <p id="two">ipsum</p>
    <p id="three">deta</p>
    <p id="four">epsilon</p>
</div>


       <script>

               var = routine = function(0)
               ourLovelyP.classList.remove("become"+counter);
               counter=counter+1
           if (counter>3) {
           counter=0;
           }
           document.addEventListener("click",routine,false)
           ourLovelyP.addEventListener("transitioned,function(){document.title=hello}

    var counter = 0;
    var ourLovelyP= document.querySelector("#one");

           document.onclick = function ()
           {
            ourLovelyP.classList.remove("become"+counter);
            counter = counter + 1;
            ourLovelyP.classList.add("become"+counter);
           };

           document.querySelector("#two")
    .onclick = function () {

    };
    </script>
</body>
</html>