/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Help with getElementById and setting it’s contents

Hi guys,

Can someone please explain why the code below works in IE6 but not Firefox 1.5? I am new to Javascripting, and can’t work it out myself.

The script is supposed to print the name of the selected player in the DIV that is below.

I have the NoScript extension running in Firefox but It’s set to allow javascript from my dev server.

Cheers,
Nap

[CODE]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<html lang=”en”>
<head><title>Untitled</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<meta http-equiv=”Content-Script-Type” content=”text/javascript”>
<meta http-equiv=”Content-Style-Type” content=”text/css”>
<script type=”text/javascript”>
<!–

function getUserData() {
var x=document.getElementById(“playername”)
var y=document.getElementById(“mytest”)
y.innerHTML= ‘<b>’ + x.options[x.selectedIndex].text + ‘</b>’

}

//–>
</script>

</head>

<body>
<table border=”0″ cellpadding=”0″>
<tr>
<td><p class=”text”>Name:</p></td>
<form><td><select id=”playername” size=”1″ onchange=”getUserData()” name=”editname” style=”background-color: white; border: 1 solid black” class=”text”>
<option>ABC</option>
<option>DEF</option>
<option>GHI</option>
</select></td></form>
</tr>
<tr>
<td><div id=”mytest”>Goodbye</div></td>
</tr>
</table>
</body>
</html>[/CODE]

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@samanyoluJan 21.2007 —  <br/>
&lt;script type="text/javascript"&gt;

function writeMe () {

var e = document.getElementById('form1');
var d = document.getElementById('mydiv');

d.innerHTML = "&lt;b&gt;"+e.select1.options[e.select1.selectedIndex].text +"&lt;/b&gt;";

}
&lt;/script&gt;

&lt;form id="form1"&gt;
&lt;select id="select1" onchange="writeMe ()"&gt;
&lt;option&gt;ABC&lt;/option&gt;
&lt;option&gt;DEF&lt;/option&gt;
&lt;option&gt;GH&amp;#304;&lt;/option&gt;
&lt;/select&gt;
&lt;/form&gt;
&lt;div id="mydiv"&gt;&lt;/div&gt;


It don't work, unless I change function name.

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;html lang="en"&gt;
&lt;head&gt;&lt;title&gt;Untitled&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;script type="text/javascript"&gt;
&lt;!--

function aaa () {
var x=document.getElementById("playername")
var y=document.getElementById("mytest")
y.innerHTML= '&lt;b&gt;' + x.options[x.selectedIndex].text + '&lt;/b&gt;'

}

//--&gt;
&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;table border="0" cellpadding="0"&gt;
&lt;tr&gt;
&lt;td&gt;&lt;p class="text"&gt;Name:&lt;/p&gt;&lt;/td&gt;

&lt;form&gt;&lt;td&gt;&lt;select id="playername" size="1" onchange="aaa ()" name="editname" style="background-color: white; border: 1 solid black" class="text"&gt;
&lt;option&gt;ABC&lt;/option&gt;
&lt;option&gt;DEF&lt;/option&gt;
&lt;option&gt;GHI&lt;/option&gt;
&lt;/select&gt;&lt;/td&gt;&lt;/form&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;div id="mytest"&gt;Goodbye&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@NapauthorJan 21.2007 — I found it, and I [b]DON"T BELIEVE IT[/b]. I thought I'ld seen some stupid things in my life but this takes the cake.

It looks like it doesn't work in Firefox because the event handler funciton is named: "getUserData()" instead of "changeText()".

As soon as I changed the name of the function, my original code started to work.

I thought I could choose the function names myself, as long as I have matching pairs. Is there a reference I can find on the web that explains this type of limitation (and others)?

Cheers,

Nap
Copy linkTweet thisAlerts:
@NapauthorJan 21.2007 — samanyolu ,

Thnx for the time you spent working that out. I was doing the same thing here.

Would it be possible that 'getUserData' is a predefined function name in the DOM?

I thought I could choose the function names myself, as long as I have matching pairs. Is there a reference I can find on the web that explains this type of limitation (and others)?

Cheers,

Nap
Copy linkTweet thisAlerts:
@Mr_JJan 21.2007 — I got the same thing when using getUserData() although if you lowercase any one of the uppercase characters or lowercase all it works

Just got this from a quick google

getUserData introduced in DOM Level 3

Retrieves the object associated to a key on a this node. The object must first have been set to this node by calling setUserData with the same key.
Copy linkTweet thisAlerts:
@NapauthorJan 21.2007 — Mr J,

thnx m8. Just my luck.

I spent 6 hours trying to figure it out b4 I posted my question. Never expected the answers I got.

Cheers,

Nap
×

Success!

Help @Nap 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 6.18,
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: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

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