I'm trying to hide a div on my website using javascript.
HTML :
<div class="portlet-boundary portlet-boundary_39_ portlet-borderless portlet-rss portlet-draggable yui3-dd-drop" id="p_p_id_39_INSTANCE_gUlP5HeyQaiq_">
JAVASCRIPT :
document.getElementById('p_39_INSTANCE_gUlP5HeyQaiq').style.display="none";
I got this error : Uncaught TypeError: Cannot set property 'style' of null
I'm using Liferay by the way. Someone know where is my problem ? Thanks in advance.
I'm trying to hide a div on my website using javascript.
HTML :
<div class="portlet-boundary portlet-boundary_39_ portlet-borderless portlet-rss portlet-draggable yui3-dd-drop" id="p_p_id_39_INSTANCE_gUlP5HeyQaiq_">
JAVASCRIPT :
document.getElementById('p_39_INSTANCE_gUlP5HeyQaiq').style.display="none";
I got this error : Uncaught TypeError: Cannot set property 'style' of null
I'm using Liferay by the way. Someone know where is my problem ? Thanks in advance.
Share Improve this question edited Nov 24, 2016 at 0:58 Jonathan.Brink 25.5k20 gold badges82 silver badges125 bronze badges asked Nov 24, 2016 at 0:55 Canette De FantaCanette De Fanta 451 gold badge1 silver badge7 bronze badges 8-
The ID isn't the same as the one on the element.
id="p_p_id_39_INSTANCE_gUlP5HeyQaiq_"– user1106925 Commented Nov 24, 2016 at 0:56 - Thanks, just corrected that but it still don't work. Always this message error – Canette De Fanta Commented Nov 24, 2016 at 1:00
- Please make sure you have a unique ID or else it won't work as expected. – claudios Commented Nov 24, 2016 at 1:05
- Is your javascript executing before the document is loaded, before the div is present? – ray Commented Nov 24, 2016 at 1:07
- Maybe not, how can I check this ? Or there is something to execute my script before loaded the document ? – Canette De Fanta Commented Nov 24, 2016 at 1:11
3 Answers
Reset to default 2Works fine in principle:
function hide() {
document.getElementById("p_p_id_39_INSTANCE_gUlP5HeyQaiq_").style.display = "none";
}<div class="portlet-boundary portlet-boundary_39_ portlet-borderless portlet-rss portlet-draggable yui3-dd-drop" id="p_p_id_39_INSTANCE_gUlP5HeyQaiq_">GOODBYE</div>
<button onclick="hide()">Hide</button>If you fix the ID to make sure it's the exact same one, the other thing to check is to make sure that the <div> exists by the time the JS line is called. You can do this by moving the <script> to the end of your <body>, or by wrapping the call in a handler that makes sure it's only called after all the HTML is loaded.
You need to make sure that the id on the DIV is the same as the one you are using in your javascript, which in your case is not.
Replace this <div class="portlet-boundary portlet-boundary_39_ portlet-borderless portlet-rss portlet-draggable yui3-dd-drop" id="p_p_id_39_INSTANCE_gUlP5HeyQaiq_"> with this
<div class="portlet-boundary portlet-boundary_39_ portlet-borderless portlet-rss portlet-draggable yui3-dd-drop" id="p_p_id_39_INSTANCE_gUlP5HeyQaiq_">I AM HIDDEN</div>.
Javascript
In your javascript, make sure ID are the same tho.
document.getElementById('p_p_id_39_INSTANCE_gUlP5HeyQaiq_').style.display="none";
Change the js to this, and also, execute the javascript code after all the elements are loaded. If you already fixed the ID, and still does not work, remember to put the script tag after all elements inside body, and just before the body closing.
document.getElementById('p_p_id_39_INSTANCE_gUlP5HeyQaiq_').style.display="none"