Home/ Questions/Q 664473
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T23:36:13+00:00

The problem: making a very simple style switcher with js (without inline event handling).

  • 0

The problem:
making a very simple style switcher with js (without inline event handling). This is probably easy to do. I’ve confused myself with handling multiple onclick events however and just proped everything up with inline. Anyone know how to handle multiple onclick events?

The Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0    Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head><title>page 2</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<link rel="stylesheet" id="style" type="text/css" href="style.css" />
<script type="text/javascript" src="switcher.js"></script>
</head>
<body>
<h1>page 2</h1>
<hr/>
<div id="nav">
<ul id="pages">
<li><a href="#" id="style1" onclick="style_one()" >Style 1</a></li>
<li><a href="#" id="style2" onclick="style_two()">Style 2</a></li>
<li><a href="#" id="style3"  onclick="style_three()" >Style 3</a></li>
<li><a href="page3.htm">Page 3</a></li>
</ul>
<ul id="logout">
<li><a href="login.htm">Log Out</a></li>
</ul>
</div>
<hr/>
</body>
</html>

The external JS so far

function style_one()
{
document.getElementById("style").href="style1.css";
}

function style_two()
{
document.getElementById("style").href="style2.css";
}

function style_three()
{
document.getElementById("style").href="style3.css";
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    if (element.addEventListener) // most browsers
    element.addEventListener(eventName, listener, true);
else if (element.attachEvent) // IE
    element.attachEvent('on' + eventName, listener);

    For instance:

    function addDomListener: function(element, eventName, listener) {
    if (element.addEventListener) // most browsers
        element.addEventListener(eventName, listener, true);
    else if (element.attachEvent) // IE
        element.attachEvent('on' + eventName, listener);
}
addDomListener(document.getElementById("style"), "click", function () {
    //Handle onclick #1
});
addDomListener(document.getElementById("style"), "click", function () {
    //Handle onclick #2
});

    Edit: Unless I’m not understanding the question…My brain’s fried as I’ve been staring at code all day

    • 0