/    Sign up×
Community /Pin to ProfileBookmark

Javascript function won’t work

Copy linkTweet thisAlerts:
Aug 07.2006

I’m trying to write a function that will let the users click on a button and when they do, the border will change to 4px and the others will stay at 2px.

The code below is what I have but it doesn’t work

[code=php]
function keepBold1(){
document.getElementById(‘Button1’).style.border = ‘4px solid #36532E’;
document.getElementById(‘Button2’).style.border = ‘2px solid #36532E’;
document.getElementById(‘Button3’).style.border = ‘2px solid #36532E’;
document.getElementById(‘Button4’).style.border = ‘2px solid #36532E’;
document.getElementById(‘Button5’).style.border = ‘2px solid #36532E’;
document.getElementById(‘Button6’).style.border = ‘2px solid #36532E’;
}
[/code]

Also, is it possible to assign two functions to happen on one onclick command in a DIV?

Example: <div id =”Button1″ onclick=”keepBold1();” onclick=”doSomethingElse();”>

Thanks for any help, it’s greatly appreciated

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@dkitchAug 07.2006 — For your main question, try using getElementsById('whatever')[0].whateverelse

getElementById is very browser-specific, whereas getElementsById[0] is universal

Also, is it possible to assign two functions to happen on one onclick command in a DIV?

Example: <div id ="Button1" onclick="keepBold1();" onclick="doSomethingElse();">


Thanks for any help, it's greatly appreciated[/QUOTE]

Why not have something like

[code=php]
function Button1Action(){
keepBold1();
doSomethingElse();
}
.
..
....
<div id ="Button1" onclick="Button1Action();">
[/code]
Copy linkTweet thisAlerts:
@CharlesAug 07.2006 — Try [code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Giant Says</title>

<script type="text/javascript">
if (document.getElementsByTagName) onload = function () {
var e, i = 0
while (e = document.getElementsByTagName ('BUTTON')[i++]) {
e.onfocus = function () {this.className = 'focused'}
e.onblur = function () {this.className = ''}
}
}
</script>

<style type="text/css">
button {border: 2px solid #36532E; display:block; margin:1ex; width:5em; text-align:center}
button.focused {border-width:4px; border-color:#f00}
</style>

</head>
<body>
<div>
<button>Fee</button>
<button>Fie</button>
<button>Foe</button>
<button>Fum</button>
</div>
</body>[/code]
Copy linkTweet thisAlerts:
@AnarchistXauthorAug 07.2006 — Hmm thanks, I will give that a try,

I'll post what I have if it works.

Thanks again.
Copy linkTweet thisAlerts:
@KorAug 07.2006 — Better use classes. And simply append the new function in the handler, separated by a period. Or start the new function at the end of the first one.
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;style type="text/css"&gt;
&lt;!--
div{
width:50px;
height:20px
}
.border2{
border:2px solid #36532E;
}
.border4{
border:10px solid #36532E;
}
--&gt;
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
function keepBold1(obj){
var i=1;
while(document.getElementById('Button'+i)){
var but=document.getElementById('Button'+i);
but.className=but==obj?'border4':'border2';
i++;
}
}
function doSomethingElse(obj){
alert('this button's className changed to: '+obj.className)
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="Button1" class="border2" onclick="keepBold1(this);doSomethingElse(this)"&gt;&lt;/div&gt;
&lt;br&gt;
&lt;div id="Button2" class="border2" onclick="keepBold1(this);doSomethingElse(this)"&gt;&lt;/div&gt;
&lt;br&gt;
&lt;div id="Button3" class="border2" onclick="keepBold1(this);doSomethingElse(this)"&gt;&lt;/div&gt;
&lt;br&gt;
&lt;div id="Button4" class="border2" onclick="keepBold1(this);doSomethingElse(this)"&gt;&lt;/div&gt;
&lt;br&gt;
&lt;div id="Button5" class="border2" onclick="keepBold1(this);doSomethingElse(this)"&gt;&lt;/div&gt;
&lt;br&gt;
&lt;div id="Button6" class="border2" onclick="keepBold1(this);doSomethingElse(this)"&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@AnarchistXauthorAug 07.2006 — Wow, great example, thanks Charles.
Copy linkTweet thisAlerts:
@KorAug 07.2006 — For your main question, try using getElementsById('whatever')[0].whateverelse

getElementById is very browser-specific, whereas getElementsById[0] is universal

[/QUOTE]

I don't think so. getElementById() should return an unique object (so that the id must be unique on page/session), not a collection. That means

getElementsById('whatever')[0]

or

getElementsById[0]

have no javascript meaning.
×

Success!

Help @AnarchistX spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...