Everytime i add it breaks my code

Question

adding makes it so the cat spawns all the way to the left and cant move it also breaks the moveguydown function. It pretty much breaks everything

Look at what other people did to fix this, they added px to width and height attributes but im pretty sure i did that to everything that needs it

<script language = "JavaScript">
var numberOfMonster= 0, setupScore, setupMonster, names=["rat.gif"], 
catleft = 325, catright= 250, ratleft, ratright, countElement, howfast= 
10, score = 0;

//This function is the initial setup for the game aka score, sound, 
monster spawn
function myFunction()
{
spawntheMonster( 0 );
document.all.coolscore.innerHTML= 0;
setupScore=setInterval(function(){score++; 
document.all.coolscore.innerHTML=score;}, 1000 );
setupMonster=setInterval(function(){spawntheMonster( 0 );}, 3000 );
document.getElementById('sound').play();
}

 //Next four function are deticated for moving the cat and setting 
boundaries
function leftArrowPressed()
{
  var element = document.getElementById("cat"); 

  if(parseInt(element.style.right.substring(element.style.right.length 
- 2 , 0 )) > 0 ) {
        element.style.right = parseInt(element.style.right) - 
20 + 'px';          
  }

}    

function rightArrowPressed() 
{
   var element = document.getElementById("cat");


if(parseInt(element.style.right.substring(element.style.right.length - 2 , 
0 )) < 480 ) {
          element.style.right = parseInt(element.style.right) 
+ 20 + 'px';
     }
}

function upArrowPressed() 
{
    var element = document.getElementById("cat");

    if(parseInt(element.style.top.substring(element.style.top.length - 2 , 
0 )) > 0 ) {
           element.style.top = parseInt(element.style.top) - 
20 + 'px';
    }
}

function downArrowPressed() 
{
    var element = document.getElementById("cat");


if(parseInt(element.style.top.substring(element.style.top.length - 2 , 0 
)) < 740 ) {
           element.style.top = parseInt(element.style.top) + 
20 + 'px';
    }
}

//connects the id's of arrow keys and w,a,s,d to the previous functions to 
be able to move     
function movetheguy(event){
switch (event.keyCode) {
       case 39:
         leftArrowPressed();
         break;

       case 37:
         rightArrowPressed();
         break;

       case 38:
          upArrowPressed();
          break;

       case 40:
          downArrowPressed();
          break;

       case 68:
          leftArrowPressed();
          break;

       case 65:
          rightArrowPressed();
          break;

        case 87:
           upArrowPressed();
           break;

        case 83:
           downArrowPressed();
           break;
}
}

//sets spawn, attributes, and clickablity of the rats 
function spawntheMonster(monster){

var widthrandom = Math.floor(Math.random() * 112 )* 5 - 20;
widthrandom     = "position:absolute; right: "+widthrandom+"; top: 

000;"; var z = document.createElement("IMG");

z.setAttribute("src", names[monster]);
z.setAttribute("style", widthrandom);
z.setAttribute("width", "40");
z.setAttribute("height", "54");
z.setAttribute("id", numberOfMonster+"mon");
z.setAttribute("onLoad", "setInterval(moveguydown, 100, this);");
z.setAttribute("onClick", "this.style.top=parseInt(this.style.top)-75;");

document.getElementById("back1").appendChild(z);
numberOfMonster++;
}

//moves the rats 
function moveguydown(moveMonster){

if(parseInt(moveMonster.style.top)>= 900 ){
    moveMonster.style.top= -500;
    moveMonster.style.right=Math.floor(Math.random() * 112 )* 5 - 
20;  //check this
}
else
    moveMonster.style.top=parseInt(moveMonster.style.top)+howfast;
    overlap(moveMonster);
}

//randomly spawns the rats 
function randomspawn(){

spawntheMonster(Math.floor(Math.random() * names.length));
}


function die(){
var highscore=document.all.coolscore.innerHTML;
var count;
for(count= 0 ; count<numberOfMonster; count++){
    countElement=document.getElementById(count+"mon");
    document.getElementById("back1").removeChild(countElement);
}

numberOfMonster = 0;
document.all.coolscore.innerHTML=
"GAME OVER<br><span onClick='location.reload();'>Click to restart! 
</span><br>SCORE: "+score+
"<font size='5'><br>Thanks to<br>Cat By: PRguitarman<br>Sound By: Jay 
Man<br>Rats By: Yacht Club Games";
clearInterval(setupScore);
clearInterval(setupMonster);
}

//Compares hit boxes and checks to see if you die 
function overlap(obj){
catleft =parseInt(cat.style.right)+ 75;
catright=parseInt(cat.style.right);
ratleft =parseInt(obj.style.right)+parseInt(obj.width);
ratright=parseInt(obj.style.right);

cattop =parseInt(cat.style.top);
catbot=parseInt(cat.style.top)+ 150;
rattop =parseInt(obj.style.top)+parseInt(obj.height);
ratbottom=parseInt(obj.style.top);  

if(rattop<catbot && ratbottom>cattop && ratright<catleft && 
ratleft>catright)

    die();


}

//Switches difficulty and sound
function twospeeds(){

if(howfast== 30 ){//fast
        back1.style.backgroundImage="url('large0.gif')";
        howfast= 10;}
if(howfast== 10){//WAY too fast
        back1.style.backgroundImage="url('large2.gif')";
        howfast= 30;
        document.getElementById('sound').src="sun.mp3";
        document.getElementById('sound').play();
        }
}

Answer 1

A few issues here:

1 - You are not closing the script tag. You should add </script> after your javascript code.

2 - The // operator is meant for single-line comments, while you are using it for:

//This function is the initial setup for the game aka score, sound, 
monster spawn

Which is a multi-line comment. For multi-line comments, use /* some comment */ instead.

3 - When defining a string, you should do so in a single line (at least when you are using a script tag in an HTML file, like in your case). Or, you can replace the quotation marks with backticks (`). E.g., replace:

document.all.coolscore.innerHTML=
    "GAME OVER<br><span onClick='location.reload();'>Click to restart! 
    </span><br>SCORE: "+score+
    "

by

document.all.coolscore.innerHTML=
    `GAME OVER<br><span onClick='location.reload();'>Click to restart! 
    </span><br>SCORE: "+score+
    `