Question

经过两天的努力和研究，我似乎无法弄清楚如何使用onClick来处理图像。

这是我的HTML：

<!DOCTYPE html>
<html>
    <title>Stupid F'ing Rock!</title>
 <head>   
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <script src="script.js"></script> 
</head>

    <body>
        <img id="touchRock" src="images/rock_unhappy_original.png">
    <body/>
</html>

以下是我的js文件中的代码：

/*global alert */


window.onload = function () {
    alert("Hello, I am your pet rock!");
};
document.getElementById("touchRock").onclick = function () {
    prompt("What is your name?");
};

JS文件中唯一有效的是alert函数。我也有以下错误：

5       Missing 'use strict' statement.  alert("Hello, I am your pet rock!");
8   Missing 'use strict' statement.  prompt("What is your name?");
8   'prompt' was used before it was defined.     prompt("What is your name?");

任何人都知道我做错了什么？

Answer 1

您需要在onclick函数中分配onload函数，因为您在加载正文之前正在加载JS文件并且ID尚未存在。

window.onload = function() {
    alert("Hello, I am your pet rock!");
    document.getElementById("touchRock").onclick = function() {
        prompt("What is your name?");
    };
};

无法使用onClick在JS文件中工作

1 个答案: