Onclick JavaScript变量

Java脚本- 我试图做这项工作，以进入编码，但它变得有点混乱

我的HTML：

<svg height="400" width="400">
 
<circle cx="205" cy="203" r="150" fill="black" />
<circle cx="200" cy="200" r="150" fill="#FFCE54"/>
<circle cx="150" cy="160" r="43" fill="black" />
<circle cx="150" cy="160" r="40" fill="white" />
<circle cx="250" cy="160" r="43" fill="black" />
<circle cx="250" cy="160" r="40" fill="white" />

<circle cx="150" cy="160" r="20" fill="black"/>
<circle cx="250" cy="160" r="20" fill="black"/>

<circle cx="145" cy="154" r="5" fill="white"/>
<circle cx="245" cy="154" r="5" fill="white"/>

<path d="M 135.5,260 q 65,45 130,0" 
stroke="red" stroke-width="12" fill-opacity="0" />
id="mouth"/>

</svg>

问题是，当我运行代码时，我得到了以下错误->未捕获的TypeError:无法将属性'onclick'设置为null“

---

请帮助。我做错了什么吗？

faceShape

没有出现在标记中的任何位置。我根据您提供的信息猜测您是否要添加

id=“faceShape”“

到您的

元素或类似内容。错误消息表示没有任何赋值给

faceShape

，这就是为什么它不能读取null的任何属性

<svg  height="400" width="400">
 
<circle cx="205" cy="203" r="150" fill="black" />
<circle id="faceShape" cx="200" cy="200" r="150" fill="#FFCE54"/> //added id
<circle cx="150" cy="160" r="43" fill="black" />
<circle cx="150" cy="160" r="40" fill="white" />
<circle cx="250" cy="160" r="43" fill="black" />
<circle cx="250" cy="160" r="40" fill="white" />

<circle cx="150" cy="160" r="20" fill="black"/>
<circle cx="250" cy="160" r="20" fill="black"/>

<circle cx="145" cy="154" r="5" fill="white"/>
<circle cx="245" cy="154" r="5" fill="white"/>

<path d="M 135.5,260 q 65,45 130,0" 
stroke="red" stroke-width="12" fill-opacity="0" />
id="mouth"/>

</svg>

以下是我认为您正在努力完成的工作：

---

如果没有，您可以使用代码推断您的情况。

在哪里定义了

faceShape

？它是

null

而不是

undefined

这一事实意味着您在某个地方有一些代码定义了它，而这些代码可能正在做一些事情™这意味着

faceShape

为空，因此问题将出现在定义它的代码中，而您在此处没有提供该代码。@PsiKai感谢您的回复。你发给我的代码很有效，但是我不理解新的javascript，你能给我解释一下吗或者你可以链接一个网站来解释？另外，如果我要把颜色改回黄色，我会怎么做？非常感谢：）

<svg  height="400" width="400">
 
<circle cx="205" cy="203" r="150" fill="black" />
<circle id="faceShape" cx="200" cy="200" r="150" fill="#FFCE54"/> //added id
<circle cx="150" cy="160" r="43" fill="black" />
<circle cx="150" cy="160" r="40" fill="white" />
<circle cx="250" cy="160" r="43" fill="black" />
<circle cx="250" cy="160" r="40" fill="white" />

<circle cx="150" cy="160" r="20" fill="black"/>
<circle cx="250" cy="160" r="20" fill="black"/>

<circle cx="145" cy="154" r="5" fill="white"/>
<circle cx="245" cy="154" r="5" fill="white"/>

<path d="M 135.5,260 q 65,45 130,0" 
stroke="red" stroke-width="12" fill-opacity="0" />
id="mouth"/>

</svg>

document.getElementById("faceShape").addEventListener("click", change);

function change() {
  document.getElementById("faceShape").setAttribute("fill", "#A0D468")
};