Tips for implementing a JavaScript 'getElementById' on an HTML CSS toggle button

Question

Tips for implementing a JavaScript 'getElementById' on an HTML CSS toggle button

I am in need of assistance to activate my HTML/CSS 'Toggle Switch' using JavaScript.

My goal is to have the text within the DIV hidden by default, and when the slider (switcher) is swiped to the left, it should trigger the DIV to be shown using JavaScript.

I believe I am on the right track, but there seems to be a small issue with my current action...

function toggleDiv() {
  var triggeredDiv = document.querySelector('.triggeredDiv');
  if (document.getElementById('flipswitch').checked) {
    triggeredDiv.classList.remove('shown');
  } else {
    triggeredDiv.classList.add('shown');
  }
}

document.getElementById('flipswitch').addEventListener("change", toggleDiv);

.flipswitch {
  position: relative;
  width: 200px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.flipswitch input[type=checkbox] {
  display: none;
}

.flipswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #999999;
  border-radius: 50px;
}

.flipswitch-inner {
  width: 200%;
  margin-left: -100%;
  -webkit-transition: margin 0.3s ease-in 0s;
  -moz-transition: margin 0.3s ease-in 0s;
  -ms-transition: margin 0.3s ease-in 0s;
  -o-transition: margin 0.3s ease-in 0s;
  transition: margin 0.3s ease-in 0s;
}

All other CSS code goes here

All Other HTML Code Goes Here

javascript html css

Answer 1

Answer №1

The issue at hand is that you're attempting to target the flipswitch by an id of flipswitch when in reality you assigned the switch an id of fs. To rectify this, simply update the references in the javascript code to be:

document.getElementById('fs')

in place of

document.getElementById('flipswitch')

Answer 2

The issue at hand is that you're attempting to target the flipswitch by an id of flipswitch when in reality you assigned the switch an id of fs. To rectify this, simply update the references in the javascript code to be:

document.getElementById('fs')

in place of

document.getElementById('flipswitch')

Answer 3

Answer №2

Instead of utilizing document.getElementById, it is recommended to use a method that retrieves elements by class, as per the definition in your markup.

Furthermore, the input checkbox does not toggle the checked attribute; instead, it toggles the state of the triggered div.

We can adjust the code to make it function properly:

function toggleDiv() {
   this.element || ( this.element = document.querySelector('.triggeredDiv') );

   this.element.classList.toggle("shown");
  }

Code with explanatory comments:

function toggleDiv() {
  /*
   If there is no reference in `toggleDiv.element`, 
   we employ `document.querySelector` to acquire
   and store the reference to the element with the class `.triggeredDiv`
   This ensures a single DOM traversal to retrieve the element,
   regardless of how often the function is called,
   which enhances performance.
  */
  this.element || (this.element = document.querySelector('.triggeredDiv'));

  /*
   Once we have the element, we simply toggle the `shown` class
   using the `classList.toggle` method.
  */
   this.element.classList.toggle("shown");
}

  document.querySelector('.flipswitch').addEventListener("change", toggleDiv);

function toggleDiv() {
   this.element || ( this.element = document.querySelector('.triggeredDiv') );
   
   this.element.classList.toggle("shown");
  }
  
  document.querySelector('.flipswitch').addEventListener("change", toggleDiv);

.flipswitch {
  position: relative;
  width: 200px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.flipswitch input[type=checkbox] {
  display: none;
}

/* CSS properties for flipswitch are defined here */

.triggeredDiv {
  display: none;
}

.triggeredDiv.shown {
  display: block;
}

<div class="flipswitch">
  <input type="checkbox" name="flipswitch" class="flipswitch-cb" id="fs">
  <label class="flipswitch-label" for="fs">
    <div class="flipswitch-inner"></div>
    <div class="flipswitch-switch"></div>
  </label>
</div>

<div class="triggeredDiv">
  Show Text
</div>

Answer 4

Instead of utilizing document.getElementById, it is recommended to use a method that retrieves elements by class, as per the definition in your markup.

Furthermore, the input checkbox does not toggle the checked attribute; instead, it toggles the state of the triggered div.

We can adjust the code to make it function properly:

function toggleDiv() {
   this.element || ( this.element = document.querySelector('.triggeredDiv') );

   this.element.classList.toggle("shown");
  }

Code with explanatory comments:

function toggleDiv() {
  /*
   If there is no reference in `toggleDiv.element`, 
   we employ `document.querySelector` to acquire
   and store the reference to the element with the class `.triggeredDiv`
   This ensures a single DOM traversal to retrieve the element,
   regardless of how often the function is called,
   which enhances performance.
  */
  this.element || (this.element = document.querySelector('.triggeredDiv'));

  /*
   Once we have the element, we simply toggle the `shown` class
   using the `classList.toggle` method.
  */
   this.element.classList.toggle("shown");
}

  document.querySelector('.flipswitch').addEventListener("change", toggleDiv);

function toggleDiv() {
   this.element || ( this.element = document.querySelector('.triggeredDiv') );
   
   this.element.classList.toggle("shown");
  }
  
  document.querySelector('.flipswitch').addEventListener("change", toggleDiv);

.flipswitch {
  position: relative;
  width: 200px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.flipswitch input[type=checkbox] {
  display: none;
}

/* CSS properties for flipswitch are defined here */

.triggeredDiv {
  display: none;
}

.triggeredDiv.shown {
  display: block;
}

<div class="flipswitch">
  <input type="checkbox" name="flipswitch" class="flipswitch-cb" id="fs">
  <label class="flipswitch-label" for="fs">
    <div class="flipswitch-inner"></div>
    <div class="flipswitch-switch"></div>
  </label>
</div>

<div class="triggeredDiv">
  Show Text
</div>

Answer 5

Answer №3

In order for your code to function correctly, I would recommend replacing the two occurrences of

document.getElementById('flipswitch')

with document.getElementById('fs') within your function.

Illustrative JSFiddle Model: https://jsfiddle.net/xu4t9zf7/

Answer 6

In order for your code to function correctly, I would recommend replacing the two occurrences of

document.getElementById('flipswitch')

with document.getElementById('fs') within your function.

Illustrative JSFiddle Model: https://jsfiddle.net/xu4t9zf7/

Tips for implementing a JavaScript 'getElementById' on an HTML CSS toggle button

Answer №1

Answer №2

Answer №3

Similar questions

Establishing the highest allowable value limit in cleave

Having trouble with jQuery AJAX verifying the existence of an email in the database?

Returning JSON objects from ASP.NET WebMethod without using the response method

Pop-up confirmation dialog in JQuery following an AJAX request

How can I dive into a nested array to access the properties of an object within?

Having issues with Merge Sort functionality in React not functioning as anticipated

Activate child component function using react-navigation before removal

Comparing parameters between two functions in Javascript: a step-by-step guide

What are the steps to refresh the content in a glightbox slider?

Include a new item into the existing one and iterate through the information within it

Is there a way to extract information from an external XML document and incorporate it into an HTML file?

The AJAX functionality for POST, PUT, and DELETE requests is functioning properly, however, the GET request is experiencing CORS

Mastering Angular, Typescript, and Firestore: Unlocking the Secrets of Returning an Observable Value in an If Statement

Getting the list items separated from the unordered list in Selenium

Exploring the ENV variable settings while developing in a Node.js environment

JavaScript code to obscure

Having trouble initiating tablesorter within an iframe

Modifying the date formatting in JavaScript if it is incorrect

Insert a new, unique div onto an HTML webpage using JavaScript, ensuring no duplicates are created

Encountering issues with jQuery AJAX POST request