javascript code to change clip rect settings

Question

What I'm trying to accomplish is when the window is resized, the blurred image is resized as well. For some reason the code is not working. Can someone spot what is wrong and what I need to do to correct the code. Thanks.

• CSS -

/* ------- BLUR BEHIND MESSAGE HOLDER CONTAINER SETTINGS ------- */

img.clipphoto { 
    /*--- CLIP SETTINGS: top, right, bottom, left ---*/
    clip: rect(18px,770px,600px,240px);

    position: absolute;
        -webkit-filter: blur(10px); 
        -moz-filter: blur(10px); 
        -o-filter: blur(10px); 
        -ms-filter: blur(10px); 
        filter: blur(10px);

    }

• JS -

  window.addEventListener('resize', function(event){
  var vInnerHeight= window.innerHeight; 
  
  var t = "18";
  var r = "770";
  var b = vInnerHeight-140;
  var l = "240";
  
  var clipString = "rect(" + t + "px " + r + "px " + b + "px " + l + "px)";
  
  document.getElementByClassName(clipphoto).style.clip = clipString;
  

• HTML -

  <!-- blurred photo of pix  -->
      <img src="images/image1.png" width="1200" height="620" alt="" class="clipphoto">
  

Answer 1

Believe the values should be comma separated, not space separated

var clipString = "rect(" + t + "px," + r + "px," + b + "px," + l + "px)";

document.getElementsByClassName('clipphoto')[0].style.clip = clipString;

Edit: incorporated class accessor errror by Paul Roub too

Answer 2

There is no getElementByClassName() function. It's getElementsByClassName() (plural).

And you want the string "clipphoto", not the (non-existant) variable named clipphoto:

var clipString = "rect(" + t + "px, " + r + "px, " + b + "px, " + l + "px)";
document.getElementsByClassName('clipphoto')[0].style.clip = clipString;