CODEWITHSUNDEEP
javascripthyperlinkonclick
Nik
Nik

Reputation: 405

Giving an onclick function to a link

I'm messing around with JavaScript and I want to have a coloured square with 3 links and depending on the link I click, the square will change colours. I can't get it to work and I'm not sure where I went wrong..

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';
    }
})();

Upvotes: 0

Views: 150

Answers (3)

Konstantin Dinev
Konstantin Dinev

Reputation: 34915

Make the following changes in order to ensure that the DOM has loaded.

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';
    }
};

Upvotes: 1

epascarello
epascarello

Reputation: 207557

You have two issues.

First you are using a variable called switch, that is a no no. Switch is a reserved word because it is a switch statement. Rename it. 

var xswitch = (function() {

Second, It is because you are runnnig the code before the element exists on the page. It needs to be executed onload, document dom loaded [ready], or the script needs to be added at the bottom of the page.

<!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>

Upvotes: 1

SLaks
SLaks

Reputation: 888185

You're running your code before the elements exist.

Move the <script> element to the bottom of the <body> (so that it runs after they exist), or run the code in the load event.

Upvotes: 3

Related Questions