Utilizing conditional statements like if/else and for loops within a switch statement in JavaScript allows for

I am currently developing a request portal that involves dynamic checkboxes, labels, and textboxes that are dependent on an option list.

As a beginner in javascript, I am facing challenges with creating conditional statements. I have managed to make progress by duplicating functions to display values when a different option is selected. However, the issue is that it overlaps the previous choice.

<!DOCTYPE html>
<html>

<head>

  <style>
    th,
    td {
      padding: 15px;
      font-weight: normal;
    }
  </style>

  <script type="text/javascript">
    function populate(model, destination) {
      var mod = document.getElementById(model);
      var des = document.getElementById(destination);
      var cri = document.getElementById(criteria);
      des.innerHTML = "";

      if (mod.value == "Model-A") {
        var optionArray = ["Model-A.1", "Model-A.2", "Model-A.3"];
      } else if (mod.value == "Model-B") {
        var optionArray = ["Model-B.1", "Model-B.2", "Model-B.3", "Model-B.4"];
      }

      for (var option in optionArray) {
        if (optionArray.hasOwnProperty(option)) {
          var pair = optionArray[option];
          var checkbox = document.createElement("input");
          checkbox.type = "checkbox";
          checkbox.name = pair;
          checkbox.value = pair;
          checkbox.onclick = updateCriteria;
          des.appendChild(checkbox);

          var label = document.createElement('label')
          label.htmlFor = pair;
          label.appendChild(document.createTextNode(pair));

          des.appendChild(label);
          des.appendChild(document.createElement("br"));
        }
      }

      updateCriteria();
      updateCriteria2();
    }

    function updateCriteria() {
      var text = "";
      var cri = document.getElementById("criteria").value
      var models = document.getElementsByTagName("label");
      var model = "";
      var criteria = document.getElementById("criteria");
      var qty = document.getElementById("qty");
      var cell = document.getElementById("cell");

      for (var i = 0; i < models.length; i++) {
        var br = document.createElement("br");
        var textbox = document.createElement("input");
        var textbox1 = document.createElement("input");
        var wrapper = document.createElement("span");
        model = models[i].innerText;

        if (model == "Model-A.1") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Good\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)

        } else if (model == "Model-A.2") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Fine\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)

        } else if (model == "Model-A.3") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Bad\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)
        }
      }
    }

    function updateCriteria2() {
      var text = "";
      var cri = document.getElementById("criteria").value
      var models = document.getElementsByTagName("label");
      var model = "";
      var criteria = document.getElementById("criteria");
      var qty = document.getElementById("qty");
      var cell = document.getElementById("cell");


      for (var i = 0; i < models.length; i++) {
        var br = document.createElement("br");
        var textbox = document.createElement("input");
        var textbox1 = document.createElement("input");
        var wrapper = document.createElement("span");
        model = models[i].innerText;

        if (model == "Model-B.1") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Latest\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)

        } else if (model == "Model-B.2") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "New\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)

        } else if (model == "Model-B.3") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Old\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)

        } else if (model == "Model-B.4") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Oldest\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)
        }
      }
    }
  </script>
</head>

<body>

  <div class="container">
    <table class="table">

      <tr>
        <td> MODEL: </td>
        <td>
          <select id="model" name="model" onchange="populate(this.id, 'destination')">
            <option value="select">--Select Model--</option>
            <option value="Model-A">Model-A</option>
            <option value="Model-B"> Model-B </option>
          </select>
        </td>
      </tr>
    </table>

    <table>
      <tr>
        <th>
          <center> DESTINATION: </th>
        </center>
        <th>
          <center> CRITERIA: </th>
        </center>
        <th>
          <center> QTY: </th>
        </center>
        <th>
          <center> CELL: </th>
        </center>
      </tr>
      <tr>
        <td>
          <center>
            <div id="destination" style="width:230px; word-wrap: break-word">
          </center>
          </div>
        </td>
        <td>
          <center>
            <div id="criteria" style="width:350px; word-wrap: break-word">
          </center>
          </div>
        </td>
        <td>
          <center>
            <div id="qty" required>
              </textarea>
        </td>
        </center>
        <td>
          <center>
            <div id="cell" required>
              </textarea>
        </td>
        </center>
      </tr>
    </table>

javascriptjqueryhtmlcssswitch-statement

Answer №1

Here is the updated code for you to try:

 function populate(model, destination) {
      var mod = document.getElementById(model);
      var des = document.getElementById(destination);
      var cri = document.getElementById("criteria");
      
      var qty = document.getElementById("qty");
      var cell = document.getElementById("cell");
      
var optionArray = [];
      if (mod.value == "Model-A") {
      des.innerHTML = "";
      if(cri)
      cri.innerHTML="";
      if(qty)
      qty.innerHTML="";
        if(cell)
      cell.innerHTML="";
        
        optionArray = ["Model-A.1", "Model-A.2", "Model-A.3"];
      } else if (mod.value == "Model-B") {
      des.innerHTML = "";
      if(cri)
      cri.innerHTML="";
        if(qty)
      qty.innerHTML="";
        if(cell)
      cell.innerHTML="";
        optionArray = ["Model-B.1", "Model-B.2", "Model-B.3", "Model-B.4"];
      }

      for (var option in optionArray) {
        if (optionArray.hasOwnProperty(option)) {
          var pair = optionArray[option];
          var checkbox = document.createElement("input");
          checkbox.type = "checkbox";
          checkbox.name = pair;
          checkbox.value = pair;
          checkbox.onclick = updateCriteria;
          des.appendChild(checkbox);

          var label = document.createElement('label')
          label.htmlFor = pair;
          label.appendChild(document.createTextNode(pair));
  des.appendChild(label);
          des.appendChild(document.createElement("br"));
        }
      }

      updateCriteria();
      updateCriteria2();
    }

    function updateCriteria() {
      var text = "";
      var cri = document.getElementById("criteria").value
      var models = document.getElementsByTagName("label");
      var model = "";
      var criteria = document.getElementById("criteria");
      var qty = document.getElementById("qty");
      var cell = document.getElementById("cell");

      for (var i = 0; i < models.length; i++) {
        var br = document.createElement("br");
        var textbox = document.createElement("input");
        var textbox1 = document.createElement("input");
        var wrapper = document.createElement("span");
        model = models[i].innerText;

        if (model == "Model-A.1") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Good\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)

        } else if (model == "Model-A.2") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Fine\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)

        } else if (model == "Model-A.3") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Bad\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)
        }
      }
    }

    function updateCriteria2() {
      var text = "";
      var cri = document.getElementById("criteria").value
      var models = document.getElementsByTagName("label");
      var model = "";
      var criteria = document.getElementById("criteria");
      var qty = document.getElementById("qty");
      var cell = document.getElementById("cell");

      for (var i = 0; i < models.length; i++) {
        var br = document.createElement("br");
        var textbox = document.createElement("input");
        var textbox1 = document.createElement("input");
        var wrapper = document.createElement("span");
        model = models[i].innerText;

        if (model == "Model-B.1") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Latest\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)

        } else if (model == "Model-B.2") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "New\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)

        } else if (model == "Model-B.3") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Old\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)

        } else if (model == "Model-B.4") {
          wrapper.className = model;
          textbox.className = model;
          textbox1.className = model;
          wrapper.innerText = "Oldest\n";
          criteria.appendChild(wrapper);
          criteria.appendChild(br);
          qty.appendChild(textbox)
          qty.appendChild(br)
          cell.appendChild(textbox1)
          cell.appendChild(br)
        }
      }
    }
  <style>
    th,
    td {
      padding: 15px;
      font-weight: normal;
    }
  </style>
<!DOCTYPE html>
<html>
<body>

  <div class="container">
    <table class="table">

      <tr>
        <td> MODEL: </td>
        <td>
          <select id="model" name="model" onchange="populate(this.id, 'destination')">
            <option value="select">--Select Model--</option>
            <option value="Model-A">Model-A</option>
            <option value="Model-B"> Model-B </option>
          </select>
        </td>
      </tr>
    </table>

    <table>
      <tr>
        <th>
          <center> DESTINATION: </center></th>
        
        <th>
          <center> CRITERIA: </center></th>
        
        <th>
          <center> QTY: </center></th>
        
        <th>
          <center> CELL: </center></th>
        
      </tr>
      <tr>
        <td>
          <center>
            <div id="destination" style="width:230px; word-wrap: break-word"></div>
          </center>
          
        </td>
        <td>
          <center>
            <div id="criteria" style="width:350px; word-wrap: break-word"></div>
          </center>
          
        </td>
        <td>
          <center>
            <div id="qty" required></div>
              
        </center></td>
        
        <td>
          <center>
            <div id="cell" required></div>
        </center>      
        </td>
        
      </tr>
    </table>
    </div>

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

What is the best way to trigger an event function again once a specific condition has been satisfied?

I'm currently working on a project where I need a sidebar to scroll at a slower rate until it reaches a specific point, and then stop scrolling once that point is reached. Below is the jQuery code I've been using: $(window).on("scroll", function ...

javascriptjquerycss

Angular: issue with accessing deferred variable within then-method

When working with my Angular.JS code, I encountered an issue while calling the Yahoo YQL API using GET/JSONP. Although I receive a response, there are two specific problems that arise. Instead of triggering the success method, it calls the error method. ...

jqueryangularjsjsonpjquery-deferredq

Issue with AWS SDK client-S3 upload: Chrome freezes after reaching 8 GB upload limit

Whenever I try to upload a 17 GB file from my browser, Chrome crashes after reaching 8 GB due to memory exhaustion. import { PutObjectCommandInput, S3Client } from '@aws-sdk/client-s3'; import { Progress, Upload } from "@aws-sdk/lib-storage& ...

javascripttypescriptaws-sdk

When a page first loads in Next.js with Firebase, the useEffect hook may return an undefined value

My component is designed to retrieve a subcollection from firestore: import { useEffect, useState } from "react"; import { db } from '../firebase/firebaseInit' import {useAuth} from '../components/AuthContextProvider' import { ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Is the server taking forever to respond to the jQuery ajax call?

My client-side ajax call using jQuery is running slowly, especially on the first call. Here's a breakdown of the timing: In the last call, there is a waiting time of 609ms before any action, even though it only took 210ms to receive data. Why the add ...

jqueryajaxperformancefirebugfiddler

To access the link, simply click once if there is no child menu. However, if there is a child menu attached, be sure to click

I am working on a mobile menu that is designed to slide out when clicked. Currently, the parent pages are displayed by default. I want to implement functionality where if a parent page has child pages, clicking on it will slide down the sub menu. If click ...

javascriptjqueryhtmlcss

Encounter the "Error: Source 'cloudsTileLayer-RasterSource' not found" message while trying to integrate a weather tile layer into Azure Maps

I have been working on a React application that utilizes the React-Azure-Maps npm package. My current challenge involves creating a weather layer, which I believe shares similarities with the sample code provided for layers. The code snippet responsible f ...

javascriptreactjstypescriptazureazure-maps

Implementing pagination links to trigger image changes on click

I have a javascript function that swaps the image source when clicked. I am looking to incorporate pagination links in this script. Specifically, I want to include "Previous" and "Next" text links to navigate between images. Can someone help me figure out ...

javascriptjquerypagination

What steps should I follow to set JSONP as the dataType for a request in an Angular $http service?

I have a good understanding of how to use jQuery's $.ajax: $.ajax({ url: //twitter endpoint, method:"GET", dataType:"jsonp", success:function() { //stuff } }); Is there a way to set the JSONP datatype for an angular $http service reque ...

javascriptajaxhttpangularjs

Tips for managing several Material UI Slide Components at once

Utilizing Material UI's Slide component, I have encountered an issue with my code. Upon hovering over a card, I intend for an individual slide to appear. However, the current implementation causes both slides to be displayed when hovering over any of ...

javascriptreactjsmaterial-ui

Using VueJS Computed Property along with Lodash Debounce

I have been encountering a slowdown while filtering through a large array of items based on user input. I decided to implement Lodash debounce to address this issue, but unfortunately, it doesn't seem to be having any effect. Below is the HTML search ...

javascriptvue.jslodashcomputed-propertiesdebouncing

Steps for accessing an image from the static folder in a Python-Django application

I am currently working on a portfolio website project where I am using html, css, js, and django. However, I am facing an issue with loading an image from the assets folder within the static directory. Here is a snippet of the template code causing the pr ...

cssdjangodjango-templatesdjango-staticfiles

Is it possible to create a list item animation using only one div element?

I'm currently working on achieving a dynamic animation effect for list items similar to the one demonstrated in Pasquale D'Silva's design example: https://medium.com/design-ux/926eb80d64e3#1f47 In this animation, the list item disappears wh ...

jqueryhtmlcssjquery-animate

Is there a way to manipulate HTML elements on a webpage using Swift and Xcode?

Is it feasible to manipulate HTML elements on a website from an iOS application? For instance, displaying www.google.com using a UIWebView. I am interested in achieving the following, if this idea/concept is doable: Detecting whether the user has input ...

htmliosswiftuiwebview

Efficiently accessing and displaying nested models in AngularJS

Currently, I am in the process of developing a website that involves numerous relational links between data. For instance, users have the ability to create bookings, which will include a booker and a bookee, as well as an array of messages that can be asso ...

javascriptruby-on-railsajaxangularjsrelational-database

Iterate through each element in the array and manipulate the corresponding data

I am trying to figure out a way to assign a unique id to each item in an array and send it to the "script.js" file for individual data processing. <script href="script.js"></sciprt> script.js: $(function(){ $('#box' ...

javascriptphpjquery

Retrieving the value of an array from a JSON data structure

I am working with the object shown below to extract the desired output. The result will be a new object that represents the final output. var data = { Customer: { Name: "emp1", Departments: [ {Departme ...

javascriptjsonnode.js

Whenever I try to make my links responsive, they don't seem to work as intended

This is the HTML snippet <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> ...

htmlcssbootstrap-4

Sort the DOM elements in jQuery based on their CSS color property

Displayed on the page below is a list of usernames in a random order. I'm looking to sort them using jQuery in the following sequence: red blue green purple black This is my current progress: <script type="text/javascript"> $(function() { ...

jquerycsssortingcolors

Having trouble selecting all checkboxes in the tree using angular2-tree when it first initializes

My goal is to have all checkboxes auto-checked when clicking the "feed data" button, along with loading the data tree. I've attempted using the following code snippet: this.treeComp.treeModel.doForAll((node: TreeNode) => node.setIsSelected(true)); ...

javascriptangulartypescript