时间戳

首页 > 解决方案 > Onclick JavaScript 变量

javascript - Onclick JavaScript 变量

问题描述

Java script - 我正在尝试执行此任务以进行编码，但它有点令人困惑

我的 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>

我的Javascript代码：


faceShape.onclick = function(){
    faceShape.setAttribute("fill", "#A0D468");
};

问题是，当我运行代码时，出现此错误-> Uncaught TypeError: Cannot set property 'onclick' of null"

请帮忙。难道我做错了什么？

标签： javascript

解决方案

faceShape不会出现在您的标记中的任何位置。我根据您提供的内容猜测您想要添加id="faceShape"到您的<circle>元素或类似的东西。错误消息是说没有分配任何内容，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>

我完全更改了您的 javascript 以使点击工作：

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

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

这是我认为您正在尝试完成的工作的 jsfiddle：https ://jsfiddle.net/g0k5joxq/1/

如果不是，那么您可以使用代码来推断您的情况。

推荐阅读