Question

我正在尝试进行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";
    }
}

Answer 1

建议/问题：

您的功能名称不同。

您正在LightBulbFunction事件中使用onclick功能。但是，您在脚本中没有该名称的功能。你会得到

ReferenceError：未定义LightBulbFunction（）。

要更改图片src属性值，请在事件处理程序中使用image_change.src。

要解决此问题，请将onclick属性值的名称更改为LightBulb。

＆＃13;

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";
    //          ^^^^
  }
}

＆＃13;

<div id="LightOff">
  <img src="images/light_off.png" id="light_off" alt="" onclick="LightBulb()" />
  <!--                                                           ^^^^^^^^^^^ -->
</div>

＆＃13;

更好的方法是使用addEventListener绑定元素上的事件。

＆＃13;

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);

＆＃13;

<div id="LightOff">
  <img src="images/light_off.png" id="light_off" alt="" onclick="LightBulb()" />
  <!--                                                           ^^^^^^^^^^^ -->
</div>

＆＃13;

Answer 2

在您的HTML中，代码为onclick="LightBulbFunction()"，而在javascript中为LightBulb。改变它们中的任何一个并使它们匹配

Answer 3

您没有重新定义.src。变化

image_change =

到

image_change.src =

您的函数需要具有相同的LightBulb函数名称。

javascript onclick功能不起作用？

3 个答案: