JavaScript hide/show div function
Question
Since this morning my function to show/hide specific divs is not working anymore. Everything was fine yesterday and my code doesn't seem to have any error:
l2ace.js file:
function showShop(id)
{
if(document.getElementById('paypal-form')){document.getElementById('paypal-form').style.display='none';}
if(document.getElementById('paysafecard-form')){document.getElementById('paysafecard-form').style.display='none';}
if(document.getElementById('allopass-form')){document.getElementById('allopass-form').style.display='none';}
if(document.getElementById(id)){document.getElementById(id).style.display='block';}
}
CSS:
#wrapper #shop-member #paypal-form {display:block;}
#wrapper #shop-member #paysafecard-form {display:none;}
#wrapper #shop-member #allopass-form {display:none;}
HTML:
<head>
<script type="text/javascript" src="js/l2ace.js"></script>
</head>
<div id="shop-member"><h1>Shop</h1>
<a class="paypal" href="" onclick="showShop('paypal-form');return false;"></a>
<a class="paysafecard" href="" onclick="showShop('paysafecard-form');return false;"></a>
<a class="allopass" href="" onclick="showShop('allopass-form');return false;"></a>
<div id="paypal-form"><form action="" method="post">a</form></div>
<div id="paysafecard-form"><form action="" method="post">b</form></div>
<div id="allopass-form"><form action="" method="post">c</form></div>
</div>
All is working when I inject the javascript function right behind the "shop-member" div but not if I import it from page header. Unfortunately I cannot place it after the div or my slider module will print the script in plain text so I really need to make it work from the header as it worked yesterday.
Demo at https://www.l2ace.com/ username: test password: test
When clicking the buttons, we clearly see the width of the divs changing but the content doesn't change.
4 answers
solution1
0 2014-02-12 12:26:20
Put your javascript inside <script></script> and it will never print in the screen. Also if you want your js code from external path then use:
<script type="text/javascript" src="resources/js/yourjs.js" ></script>
solution2
0 2014-02-12 12:41:28
Why don't you put that code inside your window load event?
<script>
window.addEvent('load', function () {
new JCaption('img.caption');
//Your function here
function showShop(id) {
if (document.getElementById('paypal-form')) {
document.getElementById('paypal-form').style.display = 'none';
}
if (document.getElementById('paysafecard-form')) {
document.getElementById('paysafecard-form').style.display = 'none';
}
if (document.getElementById('allopass-form')) {
document.getElementById('allopass-form').style.display = 'none';
}
if (document.getElementById(id)) {
document.getElementById(id).style.display = 'block';
}
}
});
</script>
Or inside the $(document).ready(function(){/*code here*/});
solution3
0 2014-02-12 12:54:52
您是否尝试过将<script type="text/javascript" src="resources/js/l2ace.js"></script>放在滑块模块js的头部？
solution4
0 2014-02-12 13:55:09
I recommend using jQuery
<head>
<script type="text/javascript" src="js/l2ace.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<div id="shop-member"><h1>Shop</h1>
<a class="paypal" href="#">PayPal</a>
<a class="paysafecard" href="#">PaySafecard</a>
<a class="allopass" href="#">Allopass</a>
<div id="paypal-form"><form action="" method="post">a</form></div>
<div id="paysafecard-form"><form action="" method="post">b</form></div>
<div id="allopass-form"><form action="" method="post">c</form></div>
</div>
<script type="text/javascript">
//onclick paypal class
$('.paypal').click(function(){
$('#paypal-form').show();
$('#paysafecard-form').hide();
$('#allopass-form').hide();
});
$('.paysafecard').click(function(){
$('#paysafecard-form').show();
$('#paypal-form').hide();
$('#allopass-form').hide();
});
$('.allopass').click(function(){
$('#allopass-form').show();
$('#paypal-form').hide();
$('#paysafecard-form').hide();
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.