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.