1
<script type="text/javascript">
function hide4d()
{
document.getElementById('4d_div').style.display = 'none';
}
</script>

Is there something wrong with my hide div code, I trying hide this

<div id="4d_div">
some content
some inner div , some inner div close

</div>

and I did this to my tag

<body onLoad="hide4d();">

and nothing happen when my page load.. i just wanna hide the div by default using javascript, and unhide it with a button later.

jsfiddle

Edited:

I had this on my 

<script type="text/javascript">
document.getElementById('4d_div').style.display = 'none';
</script>
</head>

But the 4d_div is still not hidden. It seems to work fine if i change to nowrap in fiddle

The weird thing is

I inspect element with chrome, the display: none; was added in, but I din't add the close tag there

my code is something like

<div id="4d_div">

<tr><td>&nbsp;&nbsp;</td></tr>

<div id="big_rate_div" class="form-group">
<tr><td width="25%">
<label for="big_rate">Big Rate</label>
</td><td>
<b>1.60</b>
</td></tr>
</div>

<tr><td>&nbsp;&nbsp;</td></tr>

<div id="small_rate_div" class="form-group">
<tr><td width="25%">
<label for="big_rate">Small Rate</label>
</td><td>
<b>0.70</b>
</td></tr>
</div>

<tr><td>&nbsp;&nbsp;</td></tr>

<div id="rebate"  class="form-group">
<tr><td width="25%">
<label for="rebate">Rebate</label>
</td><td>
<table>
<tr><td width="30%">
<input type="text" class="form-control" id="ticket_rebate" placeholder="">
</td><td>%</td>
</tr></table>
</td>
</tr>
</div>

<tr><td>&nbsp;&nbsp;</td></tr>

<div id="commission"  class="form-group">
<tr><td width="25%">
<label for="commission">Commission</label>
</td><td>
<table>
<tr><td width="30%">
<input type="text" class="form-control" id="commission" placeholder="">
</td>
<td>%</td>
</tr></table>
</td>
</tr>
</div>

</div>

My 4d_div suppose to end at the last tag, but when my page is load, the 4d_div seems individual

it close right after it open , and the div inside it was all wrap by themselves.

Is there any part of my code to make my div unable to wrap the other 4 div , big_rate_div, small_rate_div, rebate and commission

Picture Link of the issue

Baoky chen
  • 99
  • 2
  • 10

4 Answers4

2

Your fiddle doesn't work because you've selected to run the code "onLoad" in the sidebar. This creates a new scope for your function definition, so your call from the <body> tag fails due to this (look at the console - F12 to see the error message).

Change the sidebar option to run in the head instead, which leaves your function in the global scope.

Updated working fiddle

If you're having the same problem on your own page, outside of jsFiddle, then verify that the function definition exists and it is in the global scope (meaning not contained within any other function or closure). Use the console to debug.

After your edit:

Now you've lost the function and are just trying to set the style immidately. In this case, you need to either move the JavaScript to the end of the page, or use a DOM ready wrapper. The reason for this is the div is not ready in the DOM at the time the JavaScript tries to access it. For example:

window.onload = function(){
    document.getElementById('4d_div').style.display = 'none';
};
MrCode
  • 63,975
  • 10
  • 90
  • 112
1

You may want to set your div's initial style to "display: none", so it is hidden by default instead. Then create a button click handler that will show the div.

uncoder
  • 1,818
  • 1
  • 17
  • 20
0

you could try something like this: 

$(document).ready(function() {
            $('#4d_div').hide();
            $('#yourbuttonIDhere').on('click', function() {
                            $('#4d_div').show();
            }
        });
justjoe300
  • 81
  • 1
  • 9
  • This lets the javascript do all the work for you, getting rid of the onload on your body div. – justjoe300 Aug 28 '14 at 16:36
  • your code is okay, but I think I know why it doesn't work, if my 4d_div is inside a few div, is there a way to specific the 4d_div, in my page there only 1
    Contents
     – Baoky chen Aug 28 '14 at 16:41
  • I'm not sure if I understand what you're saying here. Could you explain a little more? – justjoe300 Aug 28 '14 at 16:49
  • also, @RNKushwaha had a good point. the first character of the ID shouldn't be numeric. – justjoe300 Aug 28 '14 at 17:01
  • I have some issue, when I inspect my page code with chrome, my div id="4d_div" close right after it was open, or before the next div, it can't wrap another div. I din't add the anywhere nearby, but below the end of page where I want to end the div for 4d_div. I updated my question & my code – Baoky chen Aug 28 '14 at 17:01
  • gotcha. did you try renaming the div so that the first character isn't numeric? html5 may allow it, but if you are using any frameworks, along with older versions of browsers, you may run into inconsistency issues. try renaming it fourdDiv or something similar to try it. – justjoe300 Aug 28 '14 at 17:11
0

I think the problem is in div'name which starts with 4 a numeric. It should start from a character $ or underscore.

RN Kushwaha
  • 2,081
  • 3
  • 29
  • 40