使用vannilla JS更改DOM中的元素时出错

Question

我创建了一个程序，在点击按钮时更改HTML中的元素，但它会导致错误

<button id='change'>hi</button>
<p id="pp">text</p>
<script>
var myfunction=function(e){
e.preventDefault();
document.getElementById('pp').innerHTML=<p id="pp">change</p>
}
document.getElementById('change').addEventListener('click',myfunction(e))
</script>

代码和盒式链接

https://codesandbox.io/s/bold-waterfall-90e74

Answer 1

您有两个问题。一种是将myFunction的返回值传递给.addEventListener，其中e的值未定义。另一个是您没有正确设置CCD_ 4。我不确定您是否可以使用HTML语法在JavaScript中创建HTML元素，但如果可以，您将使用相同的id创建另一个<p>元素。此外，.innerHTML应该是String，并且所有HTML属性都应该有双引号。试试这个：

document.getElementById('change').addEventListener('click', function (e) {
e.preventDefault();
document.getElementById('pp').innerHTML = "change";
})

<button id="change">hi</button>
<p id="pp">text</p>

您可能也不应该使用var functionName = function() {...}创建函数，因为它可能会导致提升问题。var也被弃用，可能会导致错误，所以我建议使用const和let。

Answer 2

修复此字符串：

document.getElementById('change').addEventListener('click', myfunction)

Answer 3

innerHTML值周围缺少引号。

当调用addEventListener时，您的EventListener就是function〃；myfunction"；。你不必叫它。

<button id='change'>hi</button>
<p id="pp">text</p>
<script>
var myfunction=function(e){
e.preventDefault();
document.getElementById('pp').innerHTML='<p id="pp">change</p>'
}
document.getElementById('change').addEventListener('click',myfunction)
</script>