Struggling to make the custom javascript toggle switch function properly

Question

Struggling to make the custom javascript toggle switch function properly

I've been attempting to create a switch that, when clicked, toggles between "ski" and "snowboard."

My JavaScript code seems like it should work, but for some reason, nothing is happening.

function toggleDisplay(a,b){
document.getElementById(a).style.display = "none";
document.getElementById(b).style.display = "";
}

.switch {
  border: 1px solid black;
  background-color: rgb(220,220,220);
  padding: 2px;
  width:150px;
  height:24px;
  
}

#on {
  float:left;
  display:"";
  width: auto;
  height:20px;
  background-color: rgb(95,170,250);
}

#off {
  float:right;
  display:none;
  width: auto;
  height:20px;
  background-color: rgb(250,50,25);
}

      <div class="switch">
            <div id="on" onclick="toggleDisplay('on','off')">
          Ski
            </div>
            <div id="off" onclick="toggleDisplay('off','on')">
           Snowboard
            </div>
          </div>

javascript html css

Answer 1

Answer №1

Initially, there were a couple of errors that needed correction. Firstly, using a switch statement as a named function is invalid in JavaScript as it's a reserved keyword. Another mistake was passing 'on' and 'off' as variables instead of strings. I have rectified these issues for you. Please refer to the revised code below:

function changeState(a, b){
   document.getElementById(a).style.display = 'none';
   document.getElementById(b).style.display = 'inline-block';
}

.switch {
  border: 1px solid black;
  background-color: rgb(220,220,220);
  padding: 2px;
  width:150px;
  height:24px;
}

#on {
  float:left;
  display:"";
  width: auto;
  height:20px;
  background-color: rgb(95,170,250);
}

#off {
  float:right;
  display:none;
  width: auto;
  height:20px;
  background-color: rgb(250,50,25);
}

<div class="switch">
     <div id="on" onclick="changeState('on','off')">
        Ski
     </div>
     <div id="off" onclick="changeState('off','on')">
            Snowboard
     </div>
</div>

Answer 2

Initially, there were a couple of errors that needed correction. Firstly, using a switch statement as a named function is invalid in JavaScript as it's a reserved keyword. Another mistake was passing 'on' and 'off' as variables instead of strings. I have rectified these issues for you. Please refer to the revised code below:

function changeState(a, b){
   document.getElementById(a).style.display = 'none';
   document.getElementById(b).style.display = 'inline-block';
}

.switch {
  border: 1px solid black;
  background-color: rgb(220,220,220);
  padding: 2px;
  width:150px;
  height:24px;
}

#on {
  float:left;
  display:"";
  width: auto;
  height:20px;
  background-color: rgb(95,170,250);
}

#off {
  float:right;
  display:none;
  width: auto;
  height:20px;
  background-color: rgb(250,50,25);
}

<div class="switch">
     <div id="on" onclick="changeState('on','off')">
        Ski
     </div>
     <div id="off" onclick="changeState('off','on')">
            Snowboard
     </div>
</div>

Struggling to make the custom javascript toggle switch function properly

Answer №1

Similar questions

Is there a way to prevent HTML code from being executed when sharing it as text? I want to be able to share code without it being activated as HTML on the page

Is there a way to trigger validation with a disabled property?

Cause a bootstrap column to have overflowing content rather than expanding

Is there a way to use jQuery draggable to move a zoomed image within a div clipping mask?

Transferring state to a nested child component within a parent component's child

When the React-bootstrap Popover arrow is oriented vertically, the arrow colors appear to be inverted compared to when it

Make the div's width equal to the width of the table inside

Struggling to make the javascript function compatible with the drop-down menu

The issue with Angular-gettext is that it fails to update dynamically generated strings in the code

The Vue router requires a page reload to see changes and does not have access to the this

What causes the disparity in appearance between this html/css code in firefox versus ie?

Integrating a PHP function within an ECHO statement

Engage with a specific element within the Document Object Model even in the absence of a 'ref' attribute

AJAX: How to handle a successful POST request?

Unable to assign headers once they have already been sent to the recipient - a Node.js error

Show/Hide Section

CSS tip: Create a trendy design by adding a slanted border to the last

Error message: ASP.Net Update Panel unable to access global variables in code-behind

Set up specific vue.config.js configurations for unique environments in Vue

Can a contentEditable div be given a set height in React.js?