Revealing concealed information through an onClick event using html, css, and javascript

Question

Revealing concealed information through an onClick event using html, css, and javascript

Initially, my intention was to hide the entire body and display only one image. However, I discovered that using display:none would also hide all of its children. To resolve this issue, I modified my code to hide specific parameters.

In essence, I aim to reveal hidden content when clicking on non-hidden elements.

Below is my HTML Code: enter image description here JS code: enter image description here And CSS code: enter image description here

Although the code may appear simple, I am facing a challenge as nothing happens when I click on the image.

I apologize if my question lacks clarity. This is my first time posting on stackoverflow, and I am open to providing more context. Thank you in advance.

javascript html css

Answer 1

Answer №1

There seems to be a mistake in your JavaScript code. Make sure to include quotation marks when necessary.

For example, you should write .style.display = "block";

Answer 2

There seems to be a mistake in your JavaScript code. Make sure to include quotation marks when necessary.

For example, you should write .style.display = "block";

Answer 3

Answer №2

<html>
<head>
    <style>
        p {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <p>This is just a sample text</p>
    <img id="click" src="" width="500px" height="500px">

    <script>
        var toggle = document.getElementById("click");
        toggle.addEventListener("click", displayText);

        function displayText() {
            var p = document.getElementsByTagName("p")[0].style.visibility = "visible";
        }
    </script>
</body>
</html>

Answer 4

<html>
<head>
    <style>
        p {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <p>This is just a sample text</p>
    <img id="click" src="" width="500px" height="500px">

    <script>
        var toggle = document.getElementById("click");
        toggle.addEventListener("click", displayText);

        function displayText() {
            var p = document.getElementsByTagName("p")[0].style.visibility = "visible";
        }
    </script>
</body>
</html>

Answer 5

Answer №3

Appreciate everyone's support! I finally managed to solve the issue. I was experiencing difficulties with getElementsByTagName and getElementsByClassName as they required a for loop to display all elements. Instead, I opted for getElementById and utilized the "onclick" event in the HTML code. Grateful for the help!

Answer 6

Appreciate everyone's support! I finally managed to solve the issue. I was experiencing difficulties with getElementsByTagName and getElementsByClassName as they required a for loop to display all elements. Instead, I opted for getElementById and utilized the "onclick" event in the HTML code. Grateful for the help!

Revealing concealed information through an onClick event using html, css, and javascript

Answer №1

Answer №2

Answer №3

Similar questions

It appears that the flex-grow property is not functioning as expected

Is there a way to retract a QDate selection?

Retrieve data from a Vuetify data table when the user clicks on the arrow

Using an inline-block within a positioned absolute element

What can be done to stop the Datepicker from exiting the Dialog box and causing it to malfunction?

CSS list items do not expand

Troubleshooting: jQuery AJAX request not functioning as expected

What strategies work well for guiding individuals to different destinations based on their user roles, such as administrators and regular users?

Mysterious CSS Margin/Padding Issue

Adjust the top margin of a div to match the height of the screen within an iframe, ensuring cross-browser

Is there a way for me to detect if the user has manipulated the CSS or JavaScript in order to alter the look of my website?

Animating CSS based on the viewport's position

Personalize the layout of bootstrap columns for desktop devices

"Troubleshooting Laravel 5: Why isn't the Ajax post Method Working in

There is an issue with the function of elem.autocomplete - it is not recognized

Updating data in React Native fails to activate useEffect, leading to the screen not being refreshed

Receiving a parseerror when trying to use AJAX to retrieve cross-domain data using WCF

The Jquery Datatable fails to display the accurate number of rows based on the selections made in the dropdown

I am trying to set the text direction to RTL for the window.getSelection value. However, I'm having trouble figuring out how to remove getSelection from the current value

The Server Components render encountered a glitch