PDA

View Full Version : using only javascript, change color by clicking an existing link



Qsnipp
Nov 27th, 2014, 05:57 PM
Hi all,

I'm fairly new to JS. I'm trying to change the color of a field using only javascript, when I click a link. The HTML link is opening up a page already. I want to click that link and instead of going to that page, I want to change the color of a word. I want to do no edits to the HTML itself, so no calling the function through the html, just JS. Why doesn't the following work? I thought the document.ready event is called when the page is loaded, but it seems the JS is not being called at all.

<html>
<head>
</style>
<script type="text/javascript">
$(function(){
document.getElementById("link").onclick(
document.getElementById("fun").style.color="red";
);
});
</script>
</head>
<body>
<div id="fun" style="color:green;">fun</div>
<a href="./test.html" id="link">Link 1</a>
</body>
</html>

Thanks for your help!

Philip M
Nov 27th, 2014, 06:31 PM
Syntax error
document.getElementById("fun").style.color="red (unless this forum has amputated the closing ")

Qsnipp
Nov 27th, 2014, 06:37 PM
Hm.. I think so. I forgot the <code> tag in the original post. Hopefully this shows the entire snippet of code:

<code>
<html>
<head>
</style>
<script type="text/javascript">
$(function(){
document.getElementById("link").onclick(
document.getElementById("fun").style.color="red";
);
});
</script>
</head>
<body>
<div id="fun" style="color:green;">fun</div>
<a href="./test.html" id="link">Link 1</a>
</body>
</html>
</code>

Qsnipp
Nov 27th, 2014, 06:38 PM
boy.. wrong again. trying one more time:



<html>
<head>
</style>
<script type="text/javascript">
$(function(){
document.getElementById("link").onclick(
document.getElementById("fun").style.color="red";
);
});
</script>
</head>
<body>
<div id="fun" style="color:green;">fun</div>
<a href="./test.html" id="link">Link 1</a>
</body>
</html>

sunfighter
Nov 27th, 2014, 06:48 PM
</style> does not belong in this code.
If you want jquery you must call jquery.
This is just javascript:


<!DOCTYPE html>
<html>
<head>
</head>

<body>
<div id="fun" style="color:green;">fun</div>
<a href="#" id="link" onclick="Color()">Link 1</a>

<script type="text/javascript">
function Color(){
document.getElementById("fun").style.color="red";
}
</script>
</body>
</html>


Personally I don't like using anchors for this.

<button onclick="Color()">Link 1</button> Works just as well.

Qsnipp
Nov 27th, 2014, 07:32 PM
</style> does not belong in this code.
If you want jquery you must call jquery.
This is just javascript:


<!DOCTYPE html>
<html>
<head>
</head>

<body>
<div id="fun" style="color:green;">fun</div>
<a href="#" id="link" onclick="Color()">Link 1</a>

<script type="text/javascript">
function Color(){
document.getElementById("fun").style.color="red";
}
</script>
</body>
</html>


Personally I don't like using anchors for this.

<button onclick="Color()">Link 1</button> Works just as well.

Thanks! So I've done what you outlined before, and used a button as well. Let's assume the "link" is now a "button". However, what I'm trying to do is not call the function within the button when I click it. Let's say the HTML button is only this and I don't want to change it:



<button id="link">Button</button>


I just want to know if its possible to call this link via a function when the page loads, then say, when that link is clicked, change the color of this word. All within the javascript function. I hope that makes sense.

If I logically follow my original code, it seems that the document ready function is called at page load. Within the function, if I click the link, the color of that word should change.

sunfighter
Nov 27th, 2014, 07:50 PM
The click function is part of jquery, so it has to be called.



<body>
<div id="fun" style="color:green;">fun</div>
<button id="theLink">Link 1</button>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#theLink').click( function(){
document.getElementById("fun").style.color="red";
});
});
</script>
</body>

Qsnipp
Nov 27th, 2014, 08:00 PM
The click function is part of jquery, so it has to be called.



<body>
<div id="fun" style="color:green;">fun</div>
<button id="theLink">Link 1</button>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#theLink').click( function(){
document.getElementById("fun").style.color="red";
});
});
</script>
</body>


Awesome! That works perfectly! So if I went back to having a link, and had the link pointing to a test page first, how would I go about changing the function to use that link to change the color of the word?

[code]
<body>
<div id="fun" style="color:green;">fun</div>
<a href="./test.html" id="theLink">Link 1</a>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#theLink').click( function(){
document.getElementById("fun").style.color="red";
});
});
</script>
</body>
[\code]

I've tested with href="#" and that works fine. But when I point to a test page I have, it always goes to the test page.

sunfighter
Nov 27th, 2014, 08:16 PM
<body>
<div id="fun" style="color:green;">fun</div>
<a href="test_2.html" id="link">Link 1</a>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#link').click( function(){
document.getElementById("link").setAttribute('href', '#');
document.getElementById("fun").style.color="red";
});
});
</script>
</body>


Be advised this kills the link.

Qsnipp
Nov 27th, 2014, 08:32 PM
Thanks a lot! That works perfectly. I was also messing around and used this, which works as well: document.getElementById("link").href = "javascript:void(0)";

I probably have some reading up to do, but really appreciate your help.