点击input提交按钮修改背景色的实现方法及代码问题排查

原有代码的错误点 #

• 点击事件绑定错误：onclick="myFunction" 缺少函数执行必需的括号，正确写法为onclick="myFunction()"，否则点击时仅会引用函数对象，不会触发执行
• DOM选择方法使用错误：getElementById()仅支持传入元素的id属性值，不能传入CSS选择器，匹配选择器需要使用querySelector()方法
• 选择器拼写错误：属性选择器中的tpye为拼写错误，正确写法是type
• 字符串嵌套语法错误：双引号内部嵌套双引号会导致JS解析报错，需要改用单引号包裹选择器，或者转义内部双引号

修复后的实现代码 #

最小改动版本（保留原有写法逻辑） #

<input type="submit" value="Login" onclick="myFunction()">

<!-- Project -->
<script>
function myFunction(){
  document.querySelector('input[type="submit"]').style.backgroundColor = "blue";
}
</script>

更规范的优化版本（避免行内事件绑定） #

<input type="submit" value="Login" id="loginSubmit">

<script>
const submitBtn = document.getElementById('loginSubmit')
submitBtn.addEventListener('click', function() {
  this.style.backgroundColor = 'blue'
})
</script>

内容的提问来源于stack exchange，提问作者Akmal Salokhiddinov