I am trying to change the visibility property of an element to ‘visible’ when clicked and have tried numerous ways without finding the solution.
The latest attempts was to assign a variable to that property, which would then be used in a function in the click event.
The output is that the properties of addEventListener cannot be read (‘null’).
I would be grateful for some input as I have been trying for a while now, which is probably making it hard to see mistakes also.
Thanks a lot.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Pol</title>
</head>
<body>
<header>
<h1>Polyglottery</h1>
</header>
<div class = "nav_plus_bios">
<nav id="navbar" class="navbar">
<ul>
<li>Quicklinks</li>
<li><a href="#james_joyce">James Joyce</a></li>
<li><a href="#natalie_portman">Natalie Portman</a></li>
<li><a href="#jrr_tolkien">J.R.R. Tolkien</a></li>
<li><a href="#shakira">Shakira</a></li>
</ul>
</nav>
<section class = "main_section_excl_nav">
<p id="intro_text" class="intro_text">
CHANGE LATER
</p>
<div class="james_joyce_container">
<img src = "Images/jamesjoyce.jpg" alt="Image of James Joyce">
<!--<img src="Images/jamesjoyce.jpg" class = "james_joyce_img" />-->
<p class = "james_joyce_biography" id = "james_joyce_biography">
<strong>James Joyce</strong> (1882-1941) The famous Irish writer was
known for his love of languages and literature. He was initially a
teacher and a translator; he taught English all over Europe and during
his travels he was able to pick up a variety of other languages,
including Italian, German, and French. It is hard to determine how many
he actually spoke, but he’s most often credited with communicating in
between 13 and 17 other languages. His Ulysses contains fragments in
Hebrew, Latin, Greek, Spanish, Irish Gaelic, and more. Apart from that,
he was also a scholar who studied the nature of languages, so he could
probably read a wider variety of texts. Apparently he only learned
Norwegian to read Ibsen in his original language.
</p>
</div>
<!--jj buttn below
<button onclick="hideShow()class="james_joyce_button">Click to read about James Joyce</button>-->
<button class = "james_joyce_button" id = 'james_joyce_button'>James Joyce</button>
</div>
<footer>
</footer>
</section>
<script src="script.js"> </script>
</body>
</html>
(css)
.james_joyce_biography {
visibility: hidden;
}
script:
let visibility = window.getComputedStyle(james_joyce_biography).visibility;
const james_joyce_button = document.querySelector("james_joyce_button");
james_joyce_button.addEventListener("click", function () {
if ((visibility = "hidden")) {
visibility = "visible";
}
});
Thanks! Well, but what is your intention? You want to click on hidden button to make it visible? Some strange logic. Or you want to click on the button and get the hidden text, maybe?
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
