將onclick函數賦予鏈接

Question

我正在弄亂JavaScript，我想有一個帶有3個鏈接的彩色正方形，根據我單擊的鏈接，正方形將改變顏色。 我無法使其正常工作，而且不確定哪里出了問題。

的index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test Page 2</title>
    <script src="switch.js" type='text/javascript'></script>
</head>
<body>
    <img id='square' src="img/blue.png"><br>
    <a href="#" id='blue'>Blue!</a>
    <a href='#' id='red'>Red!</a>
    <a href='#' id='green'>Green!</a>
</body>
</html>

switch.js

var switch = (function() {
    var red = document.body.getElementById('red');
    var square = document.body.getElementById('square');
    red.onclick = function() {
        square.src = 'img/red.png';
    }
})();

Answer 1

您需要在元素存在之前運行代碼。

將<script>元素移動到<body>的底部（以便在它們存在后運行），或在load事件中運行代碼。

Answer 2

你有兩個問題。

首先，您使用一個名為switch的變量，即“ no no”。 Switch是保留字，因為它是switch語句。 重命名。

var xswitch = (function() {

其次，這是因為您正在運行該元素之前頁面上的代碼。 它需要在加載時執行，文檔dom已加載[就緒]，或者腳本需要在頁面底部添加。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test Page 2</title>
</head>
<body>
    <img id='square' src="img/blue.png"><br>
    <a href="#" id='blue'>Blue!</a>
    <a href='#' id='red'>Red!</a>
    <a href='#' id='green'>Green!</a>
    <script src="switch.js" type='text/javascript'></script>
</body>
</html>

Answer 3

進行以下更改，以確保已加載DOM。

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test Page 2</title>
    <script src="switch.js" type='text/javascript'></script>
    <script type="text/javascript">
        window.onload = function () {
            switchFn();
        };
    </script>
</head>
<body>
    <img id='square' src="img/blue.png"><br>
    <a href="#" id='blue'>Blue!</a>
    <a href='#' id='red'>Red!</a>
    <a href='#' id='green'>Green!</a>
</body>
</html>

JavaScript（switch.js）

var switchFn = function () {
    var red = document.getElementById('red');
    var square = document.getElementById('square');
    red.onclick = function () {
        square.src = 'img/red.png';
    }
};

將onclick函數賦予鏈接

問題描述

3 個解決方案

解決方案1
3 2013-10-23 14:10:38

解決方案2
1 已采納 2013-10-23 14:10:43

解決方案3
1 2013-10-23 14:13:59

將onclick函數賦予鏈接

問題描述

3 個解決方案

解決方案1 3 2013-10-23 14:10:38

解決方案2 1 已采納 2013-10-23 14:10:43

解決方案3 1 2013-10-23 14:13:59

解決方案1
3 2013-10-23 14:10:38

解決方案2
1 已采納 2013-10-23 14:10:43

解決方案3
1 2013-10-23 14:13:59