homepage Welcome to WebmasterWorld Guest from 54.197.215.146
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
OnClick Issue
ModernMerlin




msg:4481933
 3:56 am on Aug 5, 2012 (gmt 0)

Ok, as I am new to Java script please forgive me if this issue is an easy one and Im just missing something I cannot for the life od me figure out.

I am trying to toggle the visibility of a div based on the click of a radio button.
<input type="radio" name="spell_type" value="dpsheal" onClick="toggleVisibility('dpsheal');" /> DPS/Heal
<input type="radio" name="spell_type" value="buff" onClick="toggleVisibility1('buff');" /> Buff


And the function looks like this:
function toggleVisibility(divid) {
if (divid="dpsheal"){
document.getElementById("dpsheal").style.visibility = "visible";
document.getElementById("buff").style.visibility = "hidden";
}
else if (divid="buff")
{
document.getElementById("buff").style.visibility = "visible";
document.getElementById("dpsheal").style.visibility = "hidden";
}
}


But it just won't work. Any input would be greatly appreciated! Thanks!

 

MarkFilipak




msg:4481936
 4:36 am on Aug 5, 2012 (gmt 0)

Your problem is that the comparison should be if (divid=="dpsheal") ...note: == is a comparison, = is an assignment. Also, you're using getElementById, but you don't have an id attribute for the input elements.

That written, I'd do your code like this:

<input type="radio" name="spell_type" value="dpsheal" onClick="toggleVisibility(this);" /> DPS/Heal
<input type="radio" name="spell_type" value="buff" onClick="toggleVisibility(this);" /> Buff

<script type="text/javascript">
function toggleVisibility(element)
{
var isVisible = (element.style.visibility == "visible");
if (isVisible) element.style.visibility = "hidden";
else element.style.visibility = "visible";
}
</script>

ModernMerlin




msg:4481937
 4:44 am on Aug 5, 2012 (gmt 0)

Forgive me I forgot to put that in.

<div class="hide" id="dpsheal">
Min Damage:&nbsp;<input type="text" name="dps_min" size="5" maxlength="6" onkeypress="return onlyNumbers();">
</input>&nbsp;&nbsp;&nbsp;Max Damage:&nbsp;
<input type="text"name="dps_max" size="5" maxlength="6" onKeyPress="return numbersonly(event, true)">
</div>

ModernMerlin




msg:4482263
 5:31 pm on Aug 6, 2012 (gmt 0)

And after adding your code and clicking on the radio buttons, nothing happened still. Not sure what I am doing wrong.

ModernMerlin




msg:4482335
 8:53 pm on Aug 6, 2012 (gmt 0)

Actually I have found another way to do what I need done. Thank you for your time :)

Xenji




msg:4482539
 9:32 am on Aug 7, 2012 (gmt 0)

Just if you didn't know about it: jQuery.

This JS libary makes these functions very easy to use. For example:

$('#dpsheal').click(function(){
$('#dpsheal').toggle();
});

That would have the same effect as your JavaScript.

[api.jquery.com...]

Gowri pandiyan




msg:4550863
 9:40 am on Mar 4, 2013 (gmt 0)

Please try the below code for the same.

JS:
<script>
$(document).ready(function(){
$("input:first").click(function(){
$("input:last").toggle();
$("span:last").toggle();
});
$("input:last").click(function(){
$("input:first").toggle();
$("span:first").toggle();
});
});
</script>

HTML:
<input type="radio" name="spell_type" value="dpsheal" /><span>DPS/Heal</span>
<input type="radio" name="spell_type" value="buff" /> <span>Buff </span>

drhowarddrfine




msg:4550919
 1:39 pm on Mar 4, 2013 (gmt 0)

Just if you didn't know about it: jQuery.

This JS libary makes these functions very easy to use.

I see no reason for him to include a 40K library just to do those simple javascript functions.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved