Uncaught TypeError: Cannot read property 'preventDefault' of undefined on Form Submit

I'm making a little HTML/CSS/JS program that interpolates between color values. I have two inputs that take CSS hex colors, and then I would like to use these values in the JavaScript code. I'm getting the error: Uncaught TypeError: Cannot read property 'preventDefault' of undefined and I am not sure how to bind the to my javaScript function. Any input would be appreciated.

CodePen: https://codepen.io/jon424/pen/mdRbbYQ?editors=1111

HTML

<form >  <label for="color1">Color One:</label>    <input type="text" id="color1" name="fname">  <br><br>  <label for="color2">Color Two:</label>  <input type="text" id="color2" name"color2"><br>    <input type="submit" value="Submit"  onclick="getColorValues(document.getElementById('color1').value, document.getElementById('color2').value)"/>  </form>  <br><br>  <div id="test"></div>  

CSS

#test {      width:500px;      height:500px;      border:solid 1px #000;  }  

JS

function getColorValues(color1, color2) {    event.preventDefault();    let firstColor = hexToRgbA(color1);    let secondColor = hexToRgbA(color2);    console.log('first: ' + firstColor + ' second: ' + secondColor);    return [firstColor, secondColor];  }    const [firstColor, secondColor] = getColorValues();    function hexToRgbA(hex){      var c;      if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){          c= hex.substring(1).split('');          if(c.length== 3){              c= [c[0], c[0], c[1], c[1], c[2], c[2]];          }          c= '0x'+c.join('');          return [(c>>16)&255, (c>>8)&255, c&255].join(',');      }      throw new Error('Bad Hex');  }    const GColor = function(r,g,b) {      r = (typeof r === 'undefined')?0:r;      g = (typeof g === 'undefined')?0:g;      b = (typeof b === 'undefined')?0:b;      return {r:r, g:g, b:b};  };  const createColorRange = function(c1, c2) {       let colorList = [], tmpColor;      for (let i=0; i<255; i++) {          tmpColor = new GColor();          tmpColor.r = c1.r + ((i*(c2.r-c1.r))/255);          tmpColor.g = c1.g + ((i*(c2.g-c1.g))/255);          tmpColor.b = c1.b + ((i*(c2.b-c1.b))/255);          colorList.push(tmpColor);      }  const b = colorList.slice().reverse();  let final = colorList.concat(b)  return final;  }    const colorOne = new GColor(firstColor);  const colorTwo = new GColor(secondColor);  const range = createColorRange(colorOne, colorTwo);  let pointer = 0;  function rotateColors() {      const currentColor = range[pointer];      document.getElementById("test").style.backgroundColor = "rgb("+currentColor.r+","+currentColor.g+","+currentColor.b+")";      pointer++;      if (pointer < range.length) {        window.setTimeout(rotateColors, 5);    } else if (pointer === range.length) {      pointer = 0;      window.setTimeout(rotateColors, 5);    }  }    rotateColors();  

https://stackoverflow.com/questions/66757137/uncaught-typeerror-cannot-read-property-preventdefault-of-undefined-on-form-s March 23, 2021 at 12:04PM