javascript onclick功能不起作用？
[英]javascript onclick function not working?
问题描述
我试图做一个onclick事件，当单击灯泡图像时，它会从灯泡熄灭到图像上的灯泡，反之亦然。 我正在使用外部javascript文件。 当我单击图像时，没有任何反应。
我不知道怎么了
我的html部分：
<head>
<link rel="stylesheet" href="css/program-01.css" />
<script type="text/javascript" src="javascript/program-01.js"></script>
<title>
<h1>Program-01</h1>
</title>
</head>
<body>
<div id="LightOff">
<img src="images/light_off.png" id="light_off" alt="" onclick="LightBulbFunction()" />
</div>
</body>
我的js文件功能：
function LightBulb() {
var image_change = document.getElementById("light_off");
if (image_change.src == "images/light_off.png") {
image_change = "images/light_on.png";
} else {
image_change = "images/light_off.png";
}
}
3 个解决方案
解决方案1
2 已采纳 2015-08-31 03:41:50
建议/问题：
您的函数名称不同。
您正在
onclick事件上使用函数LightBulbFunction。 但是，您的脚本中没有该名称的功能。 你会得到
ReferenceError：未定义LightBulbFunction（）。
- 要更改图像
src属性值，image_change.src在事件处理程序内使用image_change.src。
要解决该问题， LightBulb onclick属性值的名称更改为LightBulb 。
function LightBulb() { var image_change = document.getElementById("light_off"); if (image_change.src == "images/light_off.png") { image_change.src = "images/light_on.png"; // ^^^^ } else { image_change.src = "images/light_off.png"; // ^^^^ } }
<div id="LightOff"> <img src="images/light_off.png" id="light_off" alt="" onclick="LightBulb()" /> <!-- ^^^^^^^^^^^ --> </div>
更好的方法是使用addEventListener绑定元素上的事件。
document.getElementById('light_off').addEventListener('click', function() { var image_change = document.getElementById("light_off"); if (image_change.src == "images/light_off.png") { image_change.src = "images/light_on.png"; } else { image_change.src = "images/light_off.png"; } }, false);
<div id="LightOff"> <img src="images/light_off.png" id="light_off" alt="" onclick="LightBulb()" /> <!-- ^^^^^^^^^^^ --> </div>
解决方案2
0 2015-08-31 03:42:43
在您的html中，代码为onclick="LightBulbFunction()"而在javascript中，代码为LightBulb 。 更改它们中的任何一个并使它们匹配
解决方案3
0 2015-08-31 03:46:40
您没有重新定义.src 。 更改
image_change =
至
image_change.src =
并且您的函数需要具有相同的LightBulb函数名称。
javascript onclick功能不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.