How can I change html visibility with javascript?

Question

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

Answer 1

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

Answer 2

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

Answer 3

document.getElementById('t').style.visibility="hidden";

https://www.google.com/amp/s/www.geeksforgeeks.org/hide-or-show-html-elements-using-visibility-property-in-javascript/amp/

Answer 4

Im told that it cannot read property style of null

Answer 5

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

Answer 6

How can i use this with hover. I would like to hover over something to then make it visible/hidden

Answer 7

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.

Answer 8

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.

Answer 9

Do you know how i can succesfully call the function using hover?

Answer 10

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