How can I change html visibility with javascript? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
0

How can I change html visibility with javascript?

https://code.sololearn.com/Wa6q09OzRzOY/?ref=app

8th Dec 2019, 5:28 AM
Jeremy Cruz
Jeremy Cruz - avatar
10 Answers
+ 2
Jeremy Cruz , You can use onhover event instead of onclick event in j if you wish. In css you can use :hover pseudo class. I can make code for that but really I wish that you try it. You are here to learn on your own not to just get codes from others. You'll get lot of help from SL but all that counts is your own efforts. No one can make you good progrmmer. It's you who need to take some responsibility. For css :hover pseudo class refer : https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
8th Dec 2019, 5:59 AM
🇮🇳Omkar🕉
🇮🇳Omkar🕉 - avatar
+ 1
Ive been trying this on my computer for a while but all i've been able to change is z-index. I'll try the onhover. Thanks a lot for the help
8th Dec 2019, 6:01 AM
Jeremy Cruz
Jeremy Cruz - avatar
8th Dec 2019, 5:34 AM
🇮🇳Omkar🕉
🇮🇳Omkar🕉 - avatar
0
Im told that it cannot read property style of null
8th Dec 2019, 5:35 AM
Jeremy Cruz
Jeremy Cruz - avatar
0
Jeremy Cruz , Either place your javascript code in script tag after ending body tag Or Use window.onload event in js tab. As window is default object in js you can use simply onload is enough. onload =function(){ document.getElementById('t').style.visibility="hidden"; } Another way ,arrow function onload=()=>{ document.getElementById('t').style.visibility="hidden"; } It's known issue with sl editor: https://www.sololearn.com/post/90825/?ref=app
8th Dec 2019, 5:39 AM
🇮🇳Omkar🕉
🇮🇳Omkar🕉 - avatar
0
How can i use this with hover. I would like to hover over something to then make it visible/hidden
8th Dec 2019, 5:41 AM
Jeremy Cruz
Jeremy Cruz - avatar
0
Jeremy Cruz , Make a function that that can toggle state of visibility. Use a button and onclick event. HTML: <h1 id="t">T</h1> <button onclick="toggle()"> Js: let elem; let isvisible=false; onload=()=>{ elem=document.getElementById('t'); } let toggle=()=>{ if(isvisible){ elem.style.visibility = "hidden"; isvisible =false; } else{ elem.style.visibility = "visible"; isvisible =true; } } Don't just copy this code try to understand. Every time you click button toggle() will be invoked. It'll check if element is visible. If yes then make it hidden otherwise make it visible.
8th Dec 2019, 5:51 AM
🇮🇳Omkar🕉
🇮🇳Omkar🕉 - avatar
0
The problem is that i try to call the function using hover in css but nothing happens. By the way, thanks for helping me out here.
8th Dec 2019, 5:53 AM
Jeremy Cruz
Jeremy Cruz - avatar
0
Do you know how i can succesfully call the function using hover?
8th Dec 2019, 5:53 AM
Jeremy Cruz
Jeremy Cruz - avatar
8th Dec 2019, 10:48 AM
Xyenia 🦉
Xyenia 🦉 - avatar