What could be causing this code to malfunction on jsfiddle?

Question

What could be causing this code to malfunction on jsfiddle?

Why doesn't this code from W3schools work on jsfiddle? I tried to implement it here: https://jsfiddle.net/u6qdfw5f/

    <!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<div class="w3-container">
<h2>Accordions</h2>
<p>An accordion is used to show (and hide) content that is broken into sections:</p>

<div class="w3-accordion w3-light-grey">
    <button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align w3-show">Open Section 1</button>
    <div id="Demo1" class="w3-accordion-content w3-container w3-show">
    <h4>Section 1</h4>
    <p>Some text..</p>
    </div> 
    <button onclick="myFunction('Demo2')" class="w3-btn-block w3-left-align w3-show">Open Section 2</button>
    <div id="Demo2" class="w3-accordion-content w3-container w3-show">
    <h4>Section 2</h4>
    <p>Some other text..</p>
    </div>
</div>
</div>

<script>
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>

</body>
</html>

javascript jquery html css

Answer 1

Answer №1

The issue stems from the failure of the CSS to load properly. By checking the console, an error message such as

GET https://www.w3schools.com/lib/w3.css net::ERR_INSECURE_RESPONSE

is displayed. To resolve this, add the CSS in the top right section of the fiddle.

This problem arises because the link contains https, while the w3schools website lacks a secure certificate. Trying to access

https://www.w3schools.com/lib/w3.css

on the browser will result in a privacy error. Changing it to http instead of https will make it functional in the browser.

HTTP files do not function in jsfiddle HTTPS due to security concerns. The console will display an error like:

Mixed Content: The page at 'https://jsfiddle.net/u6qdfw5f/1/' was loaded over HTTPS, but requested an insecure stylesheet 'http://www.w3schools.com/lib/w3.css'. This request has been blocked; the content must be served over HTTPS.

I've also set the javascript load type to No wrap - in <head> from the options dropdown, rather than keeping it default with onLoad. Failing to do so would lead to an error message like

Uncaught ReferenceError: myFunction is not defined

.

Check out the updated version on FIDDLE.

Answer 2

The issue stems from the failure of the CSS to load properly. By checking the console, an error message such as

GET https://www.w3schools.com/lib/w3.css net::ERR_INSECURE_RESPONSE

is displayed. To resolve this, add the CSS in the top right section of the fiddle.

This problem arises because the link contains https, while the w3schools website lacks a secure certificate. Trying to access

https://www.w3schools.com/lib/w3.css

on the browser will result in a privacy error. Changing it to http instead of https will make it functional in the browser.

HTTP files do not function in jsfiddle HTTPS due to security concerns. The console will display an error like:

Mixed Content: The page at 'https://jsfiddle.net/u6qdfw5f/1/' was loaded over HTTPS, but requested an insecure stylesheet 'http://www.w3schools.com/lib/w3.css'. This request has been blocked; the content must be served over HTTPS.

I've also set the javascript load type to No wrap - in <head> from the options dropdown, rather than keeping it default with onLoad. Failing to do so would lead to an error message like

Uncaught ReferenceError: myFunction is not defined

.

Check out the updated version on FIDDLE.

Answer 3

Answer №2

The reason your JS code isn't functioning properly is because you have set the 'Load type' in settings to execute when document.ready fires. As a result, the myFunction() definition is not within scope of the calling onclick attribute.

Another issue is that the file path for w3.css in the external files list is incorrect. By using https://, the request fails since W3Schools doesn't have an SSL certificate. It's recommended to use a http:// link instead.

After making these adjustments, the code should work successfully: Updated fiddle

However, keep in mind that the code in the W3Schools example may be a bit outdated. For modern best practices, consider utilizing unobtrusive event handlers over on* attributes and incorporating the classList to toggle classes without needing an if statement. Here's an updated version:

document.querySelectorAll('.w3-btn-block').forEach(function(el) {
  el.addEventListener('click', function() {
    var x = document.getElementById(this.dataset.target);
    x.classList.toggle('w3-show');
  })
})

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />

<div class="w3-accordion w3-light-grey">
  <button data-target="Demo1" class="w3-btn-block w3-left-align">
    Open Section 1
  </button>
  <div id="Demo1" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
  <button data-target="Demo2" class="w3-btn-block w3-left-align">
    Open Section 2
  </button>
  <div id="Demo2" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
</div>

Alternatively, if you're familiar with jQuery as per your tag on the question, you could opt for this approach:

$('.w3-btn-block').click(function() {
  var x = $(this.dataset.target);
  x.toggleClass('w3-show');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />

<div class="w3-accordion w3-light-grey">
  <button data-target="#Demo1" class="w3-btn-block w3-left-align">
    Open Section 1
  </button>
  <div id="Demo1" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
  <button data-target="#Demo2" class="w3-btn-block w3-left-align">
    Open Section 2
  </button>
  <div id="Demo2" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
</div>

It's advised to avoid using W3Schools as a reference, considering their tutorials tend to be outdated and occasionally provide inaccurate information. For JavaScript guidance, refer to Mozilla Developer Network (MDN), and utilize the official documentation for jQuery.

Answer 4

The reason your JS code isn't functioning properly is because you have set the 'Load type' in settings to execute when document.ready fires. As a result, the myFunction() definition is not within scope of the calling onclick attribute.

Another issue is that the file path for w3.css in the external files list is incorrect. By using https://, the request fails since W3Schools doesn't have an SSL certificate. It's recommended to use a http:// link instead.

After making these adjustments, the code should work successfully: Updated fiddle

However, keep in mind that the code in the W3Schools example may be a bit outdated. For modern best practices, consider utilizing unobtrusive event handlers over on* attributes and incorporating the classList to toggle classes without needing an if statement. Here's an updated version:

document.querySelectorAll('.w3-btn-block').forEach(function(el) {
  el.addEventListener('click', function() {
    var x = document.getElementById(this.dataset.target);
    x.classList.toggle('w3-show');
  })
})

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />

<div class="w3-accordion w3-light-grey">
  <button data-target="Demo1" class="w3-btn-block w3-left-align">
    Open Section 1
  </button>
  <div id="Demo1" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
  <button data-target="Demo2" class="w3-btn-block w3-left-align">
    Open Section 2
  </button>
  <div id="Demo2" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
</div>

Alternatively, if you're familiar with jQuery as per your tag on the question, you could opt for this approach:

$('.w3-btn-block').click(function() {
  var x = $(this.dataset.target);
  x.toggleClass('w3-show');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />

<div class="w3-accordion w3-light-grey">
  <button data-target="#Demo1" class="w3-btn-block w3-left-align">
    Open Section 1
  </button>
  <div id="Demo1" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
  <button data-target="#Demo2" class="w3-btn-block w3-left-align">
    Open Section 2
  </button>
  <div id="Demo2" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
</div>

It's advised to avoid using W3Schools as a reference, considering their tutorials tend to be outdated and occasionally provide inaccurate information. For JavaScript guidance, refer to Mozilla Developer Network (MDN), and utilize the official documentation for jQuery.

What could be causing this code to malfunction on jsfiddle?

Answer №1

Answer №2

Similar questions

Tips for wrapping text to fit the width of a column

Is there a method available to condense or merge PHP, DHTML, and JavaScript components efficiently?

Exploring Parameters to Customize Search Results in React

Error encountered: The Jquery-ui functionality ceases to operate upon the completion of content

`Express.js Controllers: The Key to Context Binding`

The onBlur event attached to a div is triggered when transitioning from one input element to another within the same div

Sending URL parameters from a React frontend to an Express API call involves crafting the request URL with

Tips for successfully sending parameters in a Google Geocoding request

Ensure the footer remains fixed while scrolling

Surrounding the text with background color

What is the best way to retrieve data from an Express endpoint within a React component?

Utilize localstorage with Redux and Next.js to initialize the state

Regular expression for matching zero's following a decimal

What is the best way to customize the text in the navigation bar at the top of the page

Steps to switch the displayed ionicon when the menu is toggled

Unable to display canvas background image upon webpage loading

JavaScript function returning code

Using vue.js to customize the items shown in the ox carousel

what is the easiest way to retrieve JSON data by referring to HTML values using jQuery?

Node/Express API returning empty body when being accessed through fetch or axios requests