/    Sign up×
Community /Pin to ProfileBookmark

Js Code works in Firefox 2 but not IE 7

Copy linkTweet thisAlerts:
Feb 21.2008

[U]What I’m trying to do[/U]
There are some options in the drop down menu. When I select an option, that selection should output the content of those <div name=[B]option[/B]> tags with the matching option. Well that does happen in Firefox 2, Safari 3, and Netscape 8.1, but it does not work in IE 7. I am only concerned with this code working in Firefox 2 and IE 7. I appreciate any help.

[code=html]
<html>
<head>
<title>Current News</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<style>

</style>

<script type=”text/javascript”>
function processGroup() {

var grouplist = document.getElementById(“grouplist”);
var optlist = grouplist.options[grouplist.selectedIndex].text;
var namelist = document.getElementsByName(optlist);
var headlines = “”;
var nl = namelist.childNodes;
document.getElementById(“input1”).value=grouplist.options[grouplist.selectedIndex].text;

for(var i = namelist.length-1; i >= 0; i–) {
headlines += namelist[i].innerHTML + “<br>”;
}
document.getElementById(“output3”).innerHTML = headlines ;
}

</script>
</head>
<body onload=”” marginheight=”30″ marginwidth=”30″ leftmargin=”30″ topmargin=”30″>

<form action=”index.html”>
<select id=”grouplist” onchange=”processGroup()”>

<option value=”Economics”>Economics</option>

<option value=”Health”>Health</option>

</select>
<p>Selected group is: <input type=”text” id=”input1″ size=”20″></p>
</form>

<div id=”output3″></div>
<br><br>

<div name=”Economics”>
&#8226;&nbsp;<a href=”mc.html”>Econ link 1</a>
</div>

<div name=”Economics”>
&#8226;&nbsp;<a href=”ab.html”>Econ link 2</a>
</div>

<div name=”Economics”>
&#8226;&nbsp;<a href=”gb.html”>Econ link 3</a>
</div>

<div name=”Health”>
&#8226;&nbsp;<a href=”ya.html”>Health link 1</a>
</div>

<div name=”Health”>
&#8226;&nbsp;<a href=”un.html”>Health link 2</a>
</div>

</div>

</body>
</html>
[/code]

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@ultra_comboauthorFeb 21.2008 — I removed the action attribute from the form tag. Thats not needed.

Well I don't know how to edit the original thread, before it let me to do it, but now I can't. Maybe its a not a big deal, doesn't affect the code.
Copy linkTweet thisAlerts:
@ZeroKilledFeb 21.2008 — i guess this is due that on the valid HTML code, there is no [B]name[/B] attribute for DIV elements. however, on msie this line [B]var namelist = document.getElementsByName(optlist);[/B] return an empty collection. beside it work on gecko engine that isn't the correct way to do that (at least for me).
Copy linkTweet thisAlerts:
@toicontienFeb 21.2008 — In the code you posted, you have an extra end DIV tag. The last end-DIV tag in your document is creating a markup error, and this could be the cause of IE's problems.
Copy linkTweet thisAlerts:
@ultra_comboauthorFeb 21.2008 — i guess this is due that on the valid HTML code, there is no [B]name[/B] attribute for DIV elements. however, on msie this line [B]var namelist = document.getElementsByName(optlist);[/B] return an empty collection. beside it work on gecko engine that isn't the correct way to do that (at least for me).[/QUOTE]

Ok ? I moved the name attribute inside of the <a> tag and now its outputting the content in both Firefox 2 and IE 7, but its outputting as text not as a hyperlink.

Thx for that tip ?

So now, how do I get it to output as hyperlinks? (working on it as well)
Copy linkTweet thisAlerts:
@ultra_comboauthorFeb 21.2008 — In the code you posted, you have an extra end DIV tag. The last end-DIV tag in your document is creating a markup error, and this could be the cause of IE's problems.[/QUOTE]


Ok I removed that extra </div> tag at the bottom. Thx!

Also tested the original way with the <div name= > (incorrect) without the extra </div> and it still did the same thing.

Still working on it.. Trying to get it to output hyperlink format instead of text.
Copy linkTweet thisAlerts:
@ZeroKilledFeb 21.2008 — replace the line
headlines += namelist[i].innerHTML + "&lt;br&gt;"; with
headlines += namelist[i].parentNode.innerHTML + "&lt;br&gt;";

this work as long as the link is contained on a element and that element only contain the link. like in your case, a DIV element that only contain a link.
Copy linkTweet thisAlerts:
@ultra_comboauthorFeb 21.2008 — replace the line
headlines += namelist[i].innerHTML + "&lt;br&gt;"; with
headlines += namelist[i].parentNode.innerHTML + "&lt;br&gt;";

this work as long as the link is contained on a element and that element only contain the link. like in your case, a DIV element that only contain a link.[/QUOTE]


Alright! That replacement worked. Thx alot ?

Now all I have to do, is just display the selected links only. Not the original 5 links. I believe this can be done with javascript as well. Hey I figured while we are on a roll here I'll just finish this script. ?

So the selected links should replace those 5 original links.
Copy linkTweet thisAlerts:
@ZeroKilledFeb 21.2008 — as i had come saying, this is not the correct way to perform this task. there is better and standard solution. also, i guess you're a newbie on javascript and that is ok, that's how everybody start coding. i just want you to be aware of that. time will come when you will start coding correctly, just patience and practice.

as a quick patch for your script, i would set an css style to hide the content enclosing the DIVs element on another DIV element and apply the style to that element, as follow:
[code=html]
<div style='display:none;'>

<div><a href="mc.html" name="Economics">Econ link 1</a></div>
<div><a href="ab.html" name="Economics">Econ link 2</a></div>
<div><a href="gb.html" name="Economics">Econ link 3</a></div>
<div><a href="ya.html" name="Health">Health link 1</a></div>
<div><a href="un.html" name="Health">Health link 2</a></div>
</div>[/code]
Copy linkTweet thisAlerts:
@ultra_comboauthorFeb 21.2008 — as i had come saying, this is not the correct way to perform this task. there is better and standard solution. also, i guess you're a newbie on javascript and that is ok, that's how everybody start coding. i just want you to be aware of that. time will come when you will start coding correctly, just patience and practice.

as a quick patch for your script, i would set an css style to hide the content enclosing the DIVs element on another DIV element and apply the style to that element, as follow:
[code=html]
<div style='display:none;'>

<div><a href="mc.html" name="Economics">Econ link 1</a></div>
<div><a href="ab.html" name="Economics">Econ link 2</a></div>
<div><a href="gb.html" name="Economics">Econ link 3</a></div>
<div><a href="ya.html" name="Health">Health link 1</a></div>
<div><a href="un.html" name="Health">Health link 2</a></div>
</div>[/code][/QUOTE]


That works nicely. Thx for the help and advice. However, It would be nice if you could mention some tip words related to the better and standard solution, that way I'll know what direction to go when writing other scripts. Thx again!
Copy linkTweet thisAlerts:
@ZeroKilledFeb 22.2008 — there are few option, but most of them are done through DOM method/property. for example, an old technique but that can be redesigned is to modify or apply css style to an element, other technique is to append the content on the container element (this is not the same as 'copying' the content as in your case), appending element work via nodes. another technique is to use ajax request but i wouldn't recommend it beside it is very popular, not due to the complexity but other reason.
×

Success!

Help @ultra_combo 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.19,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

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