need some help with javascript

Discussion in 'JavaScript' started by paldo, Nov 4, 2007.

0
  1. #1
    As I'm not familiar with javascript, I have a question to post:
    my webpage is an question/answer catalogue. It would take hours to add the javascript to every anchor link. Is there a way (like in CSS) to have an external javascript or in between the <head> tags? How would my new html code look like? I like to have a javascript and not a CSS!
    Thanks for your help.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>

    <body>
    <a href="#1" onClick="javascript:this.style.color = '#00ff00'">question 1</a>
    <a href="#2" onClick="javascript:this.style.color = '#00ff00'">question 2</a>
    <a href="#3" onClick="javascript:this.style.color = '#00ff00'">question 3</a>
    <p><a name="1" id="1"></a>answer 1 </p>
    <p><a name="2" id="2"></a>answer 2 </p>
    <p><a name="3" id="3"></a>answer 3 </p>
    </body>
    </html>
     
    paldo, Nov 4, 2007 IP
  2. Jamie18

    Jamie18 Peon

    Messages:
    201
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    check this stuff out, it has to do with the a tags pseudo classes http://www.echoecho.com/csslinks.htm

    i'm thinking you'll just want to put this in your css

    a:active {
    color: #00ff00;
    }
     
    Jamie18, Nov 5, 2007 IP
  3. cjburkha

    cjburkha Peon

    Messages:
    71
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Jamie18 is right, if you want to change the style you can do it with CSS.

    If you really need to attach to the onclick event for every link, use:

    function bodyLoaded() {
    var allLinks = document.getElementsByTagName('a');

    for (var i in allLinks) {
    allLinks.onclick = linkClickFunction;
    }
    }

    function linkClickFunction() {
    alert('link was clicked');
    }

    Then <body onload="bodyLoaded();">
     
    cjburkha, Nov 6, 2007 IP
  4. paldo

    paldo Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Why do I not want to use CSS? Because the Safari browser on a Mac does not change the color when the link with an anchor is visited (it is probably a bug).

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body vlink="#00FF00">
    <p><a href="#1">link1</a> </p>
    <p><a href="#2">link2</a> </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><a name="1"></a> link1</p>
    <p><a name="2"></a> link2</p>
    </body>
    </html>

    I try to change my code with your suggestion.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


    </head>
    <script language="JavaScript" type="text/javascript">
    function bodyLoaded() {
    var allLinks = document.getElementsByTagName('a');

    for (var i in allLinks) {
    allLinks.onclick = linkClickFunction;
    }
    }

    function onClick = linkClickFunction() {
    alert('link was clicked');
    }
    </script>

    <body onload="bodyLoaded();">



    <p><a href="#1">link1</a> </p>
    <p><a href="#2">link2</a> </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><a name="1"></a> link1</p>
    <p><a name="2"></a> link2</p>
    </body>
    </html>

    With which code do I replace the linkClickFunction?
    fontcolor("red") ? Something is missing !

    Thanks for your help
     
    paldo, Nov 19, 2007 IP
  5. cjburkha

    cjburkha Peon

    Messages:
    71
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Here is the full page, tested in Firefox, not Safari

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


</head>
<script language="JavaScript" type="text/javascript">
function bodyLoaded() {
var allLinks = document.getElementsByTagName('a');

for (var i in allLinks) {

allLinks[i].onclick = linkClickFunction;
}
}

function linkClickFunction() {
this.style.color = 'red';
}
</script>

<body onload="bodyLoaded();">



<p><a href="#1">link1</a> </p>
<p><a href="#2">link2</a> </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a name="1"></a> link1</p>
<p><a name="2"></a> link2</p>
</body>
</html>
    Code (markup):

    The key part is 

    
allLinks[i].onclick = linkClickFunction;

function linkClickFunction() {
}
    Code (markup):
    Note the syntax. You set the event handler (onclick) to a function (linkClickFunction)
     
    cjburkha, Nov 19, 2007 IP
  6. paldo

    paldo Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Unfortunately your nice javascript doesn't work with Safari for Mac. This must be a bug within Safari, most probably there is no solution to it.Thanks anyway.
     
    paldo, Nov 20, 2007 IP