使用原生Vanilla JS修改DOM元素时出现报错该如何解决？

错误原因 #

• 事件绑定逻辑错误：addEventListener方法的第二个参数需要传入函数引用，你写的myfunction(e)会在页面加载时直接执行该函数，而非点击按钮时触发，且此时参数e未定义，会直接抛出引用错误。
• 字符串语法错误：给innerHTML赋值的HTML内容没有用引号包裹，JavaScript无法将未包裹的文本识别为字符串，直接触发语法报错。
• 冗余代码问题：你已经通过getElementById('pp')获取到了目标p元素，修改innerHTML时不需要再嵌套一层id为pp的p标签，否则会生成<p id="pp"><p id="pp">change</p></p>的无效重复ID结构。

修复后的代码 #

<button id='change'>hi</button>

<p id="pp">text</p>

<script>
    var myfunction = function(e){
        // 普通按钮点击无默认跳转行为，preventDefault可按需保留或删除
        e.preventDefault();
        document.getElementById('pp').innerHTML = 'change';
    }
    // 仅传入函数名作为回调引用，不要加括号执行
    document.getElementById('change').addEventListener('click', myfunction);
</script>

补充说明 #

如果你需要给元素设置更复杂的HTML结构，只需要把完整的HTML内容用单引号或双引号包裹即可，比如innerHTML = '<span style="color:red">change</span>'。

内容的提问来源于stack exchange，提问作者Surendran A