Display the text when the button is clicked

This section is designed to present a riddle. When you click the button, it reveals the answer.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Puzzles</title>
<link href="/css/favicon.ico" rel="shortcut icon" type="image/icon" />
<link href="/style.css" type="Cascading style sheet/text" />
</head>
<body>

Below are the provided links:

<li>What did the Robot say to the gas pump</li>
<script type="javascript/text">
     function unhide (){
     style(document).ready
     var hid = ("div.exp")
          if (true) hid.css("visibility",hidden);
            hid({
            visibility:visible
            });
     }
 </script>
<button onclick="unhide()">Show Answer</button>
<div class="exp">
    <p class="and">Take your finger out of your ear and listen to me</p>
</div>
<!--take your finger out of your ear and listen to me-->

The contents of style.css file are as follows:

.exp{
 visibility:hidden;
}

Why isn't it functioning properly? The functionality should be operational.

I have attempted various methods, but haven't found success yet.

Answer №1

One alternative method that doesn't require javascript is to employ a <details> element with a <summary> element inside it. This allows for browser-provided interactivity.

<details>
  <summary>Why did the chicken go to the seance?</summary>
  <p>To talk to the other side!</p>
</details>

Answer №2

Feel free to implement the code snippet below. I decided to write it from scratch due to the complexity of your initial code.

function showContent() {
    var hiddenElement = document.getElementsByClassName("exp");
    
    if(hiddenElement[0].offsetWidth > 0 && hiddenElement[0].offsetHeight > 0) {
        hiddenElement[0].style.visibility = "visible";
    }
}
<head>
<style>
.exp{visibility: hidden;}
</style>
</head>
<body>
<button onclick="showContent()">Reveal Content</button>
<div class="exp">
    <p class="and">Take your finger out of your ear and listen to me</p>
</div>
</body>

Consider the following suggestions:

  • It's recommended to use IDs when targeting specific elements for modification.
  • If you're just starting out, learning jQuery might be easier for you.
  • Make sure to double check your JavaScript syntax as it appears a bit untidy at the moment.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can the dashstyle be configured for a solid-gauge chart in Highcharts?

I am having trouble making the border dashed on my pie chart. It seems that the solution provided for solidgauge charts is not working as expected. Interestingly, the graph property is undefined for solidgauge charts. I wonder if the dashed style could be ...

What is the best way to attach every object to its corresponding group of elements?

var clubbingLocations = $('#clubbing-locations'); $.getJSON("/js/location.json", function(data) { //loading the json file for (var i = 1; i <= data.locations.length; i++){ // iterating through the locations in the json file clubb ...

The pairing of Transpiller and Internet Explorer 8 is like a dynamic

In starting my new project, I am considering using BabelJS. However, there is a significant requirement that must be met: it needs to be compatible with IE8. ISSUE: Babel compiles ES6 to ES5, but the support for ES5 on IE8 is lacking. Are there any alter ...

Questions about syntax: What is the correct course of action?

If there is a child inside a div with an id, such as id="mother", how should the css be written correctly? Example: 1) #mother ul li {...} or 2) .mother ul li {...} Is there a difference? The second example I came across when MOTHER had a class name, ...

I am experiencing difficulty in successfully transmitting a variable from my jQuery code to my PHP code

I've been attempting to pass a variable from my jQuery code to my HTML/PHP code using AJAX and POST. However, I'm encountering an error message stating "Notice: Undefined index: testData in C:\xampp\htdocs\teszt\test1.php on l ...

Learn the process of automatically copying SMS message codes to input fields in Angular17

After receiving the first answer, I made some changes to the code. However, when testing it with Angular, I encountered several errors. How can I resolve these issues? TS: async otpRequest() { if ('OTPCredential' in window) { const ab ...

How can you choose all objects that are similar within an array, based on specific keys?

Is there a way to filter an array to find all objects that share similarities in certain keys, even if the values of those keys are unknown? Consider having an object structured like this: let list = [ { name: 'Adam', age: '10', u ...

The functionality of ZoneAwarePromise has been modified within the Meteor framework

After updating to the latest Angular 2.0.1 release on Meteor 1.4.1.1, I'm facing an error that says: Zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten I've attempted running meteor update and meteor reset, b ...

Is there a way to confirm if one field value is greater than another using the Ajv JSON schema validator?

Is it feasible to receive a validation error using ajv when minPrice exceeds maxPrice? What is the recommended method of achieving this, ideally adhering to the JSON schema standard? ...

Struggling with grasping the concept of Filtering Array in Eloquent Javascript Chapter 5?

Currently diving into the world of JavaScript through the enlightening pages of Eloquent JavaScript. Chapter 5 has been a breeze so far, except for one line of code inside a console.log statement that has me stumped: function filter(array, test) { ...

Instructions for updating the Modal Value using ajax

This is the script I use to retrieve the data <script> $(document).ready(function() { $('.tmpsurat').click(function() { var id=$(this).data('id'); var url ='{{URL('/cekSuratKelengkapan')}}/'+id; ...

I'm looking for a method in JavaScript that can search through my XML file to locate specific attributes and return the entire parent element containing that attribute. Can anyone help with

I'm completely new to XML and Javascript. I currently have this code in my HTML file: <select id="eigenschaften" name="eigenschaften" type="text" onchange=""> <option value="">Choose Property</option> <option value="soci ...

How can I leverage Express, AngularJS, and Socket.io to facilitate broadcasting and receiving notifications?

A new notification system is in the works. To illustrate, User 1 is initiating a friend request to User 2. The technologies being utilized include express.js, angularjs, and socket.io. When User1 clicks the button, a request is sent. On User2's end, a ...

The Performance of My Device is Lagging When Executing CSS Transition Effects

I've been working on coding in HTML, but I've encountered an issue where my device seems to struggle with running CSS smoothly. You can take a look at the code I've written on CodePen. html { height: 100%; } body { background: linear ...

When trying to implement Typeahead and AngularJS with preloaded data in the scope, an error "TypeError: Cannot call method 'then' of undefined" may occur

Attempting to implement this idea for a typeahead feature, I crafted the following code (which functions properly with json data, but not with this new data): HTML <input type="text" ng-model="result" typeahead="suggestion for suggestion in instObjs($ ...

What sets apart running Protractor with Selenium compared to running Protractor without Selenium?

After referring to the protractor resource on Github, I discovered that there is an option to execute Protractor tests without utilizing Selenium server by setting directConnect: true. What sets apart running Protractor tests with a Selenium server compa ...

Executing PHP to capture and showcase the HTTP request received from one page onto another

As a beginner in web development, I humbly ask for patience as I navigate through unfamiliar territory. If possible, please guide me through the logical steps necessary to accomplish the task at hand. I am currently working with PHP and need assistance i ...

The onChange function in React is not behaving as I anticipated

Consider the following data structure for tables: an array of objects containing nested objects: [ { "1": { "1": "Item s ", "2": "Manufacturer ", "3" ...

What makes the AngularJS ng-repeat search term filter fail to function properly?

I am attempting to create a dynamic table that filters and displays only rows containing the search term entered in the search box. Following a basic example from the w3schools tutorial, I am trying to get it to work properly: https://www.w3schools.com/ang ...

When you click, apply the hidden class to all the div elements

Is there a way to apply the .hide class to all .slide divs whenever the .option button is clicked? If so, how can I modify my JavaScript code so that all .slide divs receive the .hide class (if they don't already have it) upon clicking the .option bu ...