JavaScript操作HTML DOM出现playVid未定义及左值无效错误如何解决？

• 核心错误来自colorchange函数内的两处语法问题，导致整个JS文件解析失败，所有函数都未被成功注册，因此页面onload触发playVid()时才会提示该函数未定义：
  1. CSS属性写法错误：JS中操作DOM的style对象时，带连字符的CSS属性需要转为小驼峰命名，background-color里的连字符会被JS识别为减号运算符，导致赋值左侧语法非法，对应报错SyntaxError: invalid assignment left-hand side。
  2. 字符串未加引号：颜色值red是字符串字面量，未用单/双引号包裹时会被JS识别为未定义变量，进一步触发语法错误。

修改后的JS代码如下：

function playVid() {
  var vid = document.getElementById("myVideo");
  vid.play();
  vid.muted = true;
}   

function colorchange() {
  // 修改为小驼峰写法，字符串加引号
  document.getElementById("maindiv").style.backgroundColor = 'red';
}

如果要保留CSS属性的连字符写法，也可以用方括号语法：

document.getElementById("maindiv").style['background-color'] = 'red';

额外注意 #

HTML中绑定鼠标移入事件的标准属性名是onmouseover，你当前写的mouseover不会触发对应函数，需要修改div标签属性：

<div onmouseover="colorchange()" id="maindiv">

内容的提问来源于stack exchange，提问作者Hansa Narang