Urgent, need help please

Question

Member #949237

14 Years Ago

Please help! I have this code copied from another of my blogs.

In the first blog it works completely fine, on the new blog it does nothing. Help please:

<script type="text/javascript"><br />function show_hide(adad) { <br />if(document.getElementById(adad)) { <br />if(document.getElementById(adad).style.display == 'none') { <br />document.getElementById(adad).style.display = 'inline'; } else { <br />document.getElementById(adad).style.display = 'none'; } } }</script>

<a href="javascript:show_hide('info');">
<img border="" width="180" alt="Informações Adicionais" src="http://i921.photobucket.com/albums/ad51/clube_skdp/Campeonato%202012/CabealhoCampeonatoTitulo.png" height="45" />
</a>


<div id="Informações" style="display: none;">

               
<a href=""><span style="font-family:comic sans;color:#c0c0c0;"><strong>lololol</strong></span></a>




               
<a href=""><span style="font-family:comic sans;color:#c0c0c0;"><strong>Informações Época 2010-2011</strong></span></a>


</div>

thanks in advance

javascript web-design

Edited 14 Years Ago by Ezzaral because: Added code tags. Please use them to format any code that you post.

4 Contributors
7 Replies
119 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by teedoff

Dani AI

Generated 9 Months Ago

and correctly pointed to the most likely immediate problem: the string you pass to the toggle function has to match the element id exactly. Beyond that, several platform and markup issues can make code work on one blog and fail on another. The key checks that were not fully spelled out in replies are: (1) whether your blog stripped or sanitized the <script> tag or inline javascript, (2) whether the post editor changed quotes or broke HTML, and (3) whether non-ASCII characters or accidental capitalization in the id are preventing a match.

Quick checklist

Confirm the element id in the final rendered HTML exactly matches the value passed to your code (use the browser "View source" / Inspector).
Open the browser console for errors; an early JS error will stop subsequent scripts.
Make sure the platform allows inline scripts. Many hosted blog services strip or disable <script> tags inside post bodies.
Avoid non-ASCII ids; use simple ASCII identifiers like infoPanel.
Don’t rely on href="javascript:..." — editors often remove it or rewrite it.

Safer, more robust pattern (replace inline JS and accented ids)

<style>
.hidden { display: none; }
</style>

<a href="#" id="toggleInfo"><img src="..." alt="More info" width="180" height="45"></a>
<div id="infoPanel" class="hidden">...content...</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var btn = document.getElementById('toggleInfo');
  var panel = document.getElementById('infoPanel');
  if (!btn || !panel) return;
  btn.addEventListener('click', function (e) {
    e.preventDefault();
    panel.classList.toggle('hidden');
  });
});
</script>

Debug tips: in DevTools run document.getElementById('infoPanel') — if it returns null the id was changed/stripped. If the script tag was removed by the host, put JS in the template/custom-code area the host provides, or use the platform’s supported widgets. For DOM/load ordering and event handling, see MDN for addEventListener and DOMContentLoaded: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener and https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event.

All 7 Replies

Philippe.Lahaie 42 Posting Whiz in Training

14 Years Ago

<a href="javascript:show_hide('info');">
<img ... />
</a>
<div id="Informações" style="display: none;">

the image link calls the javascript function with "info" as argument, (in the javascript function adad is the argument received)

but the hidden div's id is "Informações" not "info"

thats what i meant with my first post. sorry if it wasn't clear enough.

Edited 14 Years Ago by Philippe.Lahaie because: typo

almostbob commented: + +13

almostbob 866 Retired: passive income ROCKS

14 Years Ago

teedoff: adad is a javascript local variable defined in the script at the top of the op function show_hide(adad) it only exists within the scope of the function, you can code many functions with the same local variable name without error, makes it simpler to reuse functions

DG12

<a href="javascript:show_hide('info');"> </a>  
<div id="Informações" style="display: none;">

the parameter in the function call and the id of the hidden div, really need to match
probably easier to change the hidden div id = "info"

edit; apologies Phillipe, already answered

Edited 14 Years Ago by almostbob because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Philippe.Lahaie 42 Posting Whiz in Training · Answer 1 · 2012-03-16T00:13:20+00:00

im guessing its because the javascript is hardcoded to work with a certain id, and the div you are trying to hide is not using that id

also im not sure its good practice to have <br>s in your script block but im guessing that was added for the post and its not in your actualy code?

teedoff 3 Posting Pro · Answer 2 · 2012-03-16T00:15:31+00:00

So the function, which btw is javascript and probably should have posted in the javascript forum, is calling an element with an id of "adad"

document.getElementById(adad)

I dont see that element in your html code anywhere.

Member #949237 · Answer 3 · 2012-03-16T00:21:30+00:00

im guessing its because the javascript is hardcoded to work with a certain id, and the div you are trying to hide is not using that id
also im not sure its good practice to have <br>s in your script block but im guessing that was added for the post and its not in your actualy code?

Yes, the <br>s are just for the blog, and they work. I altered the id (previously: the_layer) to 'adad', but the rest is completely the same as the previous blog has. And it worked. Nt even with the previous ID it works, I click on it and it does nothing...

Member #949237 · Answer 4 · 2012-03-16T00:24:35+00:00

So the function, which btw is javascript and probably should have posted in the javascript forum, is calling an element with an id of "adad"
document.getElementById(adad)
I dont see that element in your html code anywhere.

the previous ID was 'the_layer' i think, but that wasn't the problem, because in one blog it works perfectly, and than when i do a copy paste to another blog, the show/hide function does not work when i click on the button.

So i think that isn't the problem. But I have no idea what's wrong. Maybe something in the new blog??

teedoff 3 Posting Pro · Answer 5 · 2012-03-17T00:38:14+00:00

teedoff: adad is a javascript local variable defined in the script at the top of the op function show_hide(adad) it only exists within the scope of the function, you can code many functions with the same local variable name without error, makes it simpler to reuse functions

Ahh lol thanks Bob, my lack of js skills shows! Which is why I guess I suggested the OP might have more luck in the js forum. Seems you solved it though...well I guess you have, since the OP hasn't responded.

Urgent, need help please

Dani AI

Recommended Answers Collapse Answers

All 7 Replies

Recommended Answers