developing toggle switches using JSON

Question

developing toggle switches using JSON

I am faced with a JSON containing two keys, "cars" and "others". How can I implement a toggling feature on my website using HTML/CSS/JavaScript such that:

Clicking on "cars" displays the car items (small vehicle, large vehicle) in red text.
Clicking on "others" hides the car items and displays the other items in blue text.

Please note: The toggle button or link should function properly for switching between the two options.


{
    "cars": {
        "items": ["small-vehicle", "large-vehicle"],
        "color": "red"
    },
    
    "others": {
        "items": ["swimming pool", "plane", "ship"],
        "color": "blue"
    }
}

javascript html css json

Answer 1

Answer №1

Below is the code to help you get started.

Upon clicking the appropriate button, it will alert() and display the color of each item.

Now it's your turn to properly figure this out and make it work according to your preferences.

I've included a select list for you to try as well. Run the code and see how it works.

let items = {
"cars": {
"items": ["small-vehicle","large-vehicle"],
"color": "red"
},

"others": {
"items": ["swimming pool","plane","ship",],
"color": "blue"
 }
}

function showMeCarColor(){
  alert(items.cars.color);
}

function showMeOtherColor(){
  alert(items.others.color);
}

function doThing(){
  let selectedItem = document.querySelector("#itemList").value;
  switch (selectedItem){
    case "car":{
      alert(`car is : ${items.cars.color}`);
      break;
    }
    case "other":{
       alert(`other is : ${items.others.color}`);
       break;
    }
  }
}

<button onclick="showMeCarColor()">Cars</button>
<button onclick="showMeOtherColor()">Other</button>

<select id="itemList" onInput="doThing()">
  <option value=""></option>
  <option value="car">Car</option>
  <option value="other">Other</option>  
</select>

Answer 2

Below is the code to help you get started.

Upon clicking the appropriate button, it will alert() and display the color of each item.

Now it's your turn to properly figure this out and make it work according to your preferences.

I've included a select list for you to try as well. Run the code and see how it works.

let items = {
"cars": {
"items": ["small-vehicle","large-vehicle"],
"color": "red"
},

"others": {
"items": ["swimming pool","plane","ship",],
"color": "blue"
 }
}

function showMeCarColor(){
  alert(items.cars.color);
}

function showMeOtherColor(){
  alert(items.others.color);
}

function doThing(){
  let selectedItem = document.querySelector("#itemList").value;
  switch (selectedItem){
    case "car":{
      alert(`car is : ${items.cars.color}`);
      break;
    }
    case "other":{
       alert(`other is : ${items.others.color}`);
       break;
    }
  }
}

<button onclick="showMeCarColor()">Cars</button>
<button onclick="showMeOtherColor()">Other</button>

<select id="itemList" onInput="doThing()">
  <option value=""></option>
  <option value="car">Car</option>
  <option value="other">Other</option>  
</select>

developing toggle switches using JSON

Answer №1

Similar questions

Searching for a child tag in JSON using C#

How can I display only a horizontal scrollbar on the body content while avoiding an excessively long image header?

Expanding Issue with Bootstrap Navigation

Ways to show text on a donut chart when hovering with the mouse

Discovering the best way to organize and sort information retrieved from the backend within an Angular

Utilize Spark Scala to extract information from JSON documents

Display interactive form data on webpage post submission utilizing Knockout.js

Troubleshooting JavaScript Integration in PHP Scripts

Using axios to render data in a view template

Can JavaScript executed within a web browser have the capability to manipulate files on the underlying host system's file system?

Discovering local establishments using mongoDB and mongoose

Generating an HTML table using an array retrieved from a PHP execute_db function, displaying repeated entries

Luxon DateTime TS Error: The 'DateTime' namespace cannot be used as a type in this context

Overflow issues with CSS FlexBoxLayout

Show a specific portion of an extremely large .svg image file using Angular.js directive with the help of javascript or css

displaying pictures exclusively from Amazon S3 bucket using JavaScript

create a layout with intersecting divs to display a table/chart

Leverage PHP to retrieve information from a JSON file and integrate it into a dropdown menu on an HTML

React frontend unable to retrieve JSON data from Rails API

Errors and disruptions caused by SmoothScroll, ScrollMagic, and GSAP triggering glitches, jumps, and crashes