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

Encountered an issue while implementing the post function in the REST API

Every time I attempt to utilize the post function for my express rest API, I encounter errors like the following. events.js:85 throw er; // Unhandled 'error' event ^ error: column "newuser" does not exist at Connection.parseE (/Use ...

javascripthtmlnode.jsapiexpress

Utilizing Bootstrap Modal to trigger an Action Result function when a button is clicked

I could use some assistance. In my current setup, I have a file picker that loads a file into a specific table in my database. When the user clicks a button, a bootstrap modal pops up to ask if they are uploading more files. This is how it looks in my vi ...

javascriptjqueryasp.net-mvctwitter-bootstrapmodal-dialog

Avoiding Backbone Routing Conflicts when Implementing CSS3 Targeting

I have implemented a CSS target to create some basic animation in my Backbone project. However, I am facing an issue where the method I am currently using adds a #banner to the URL, which Backbone tries to interpret as a route if users refresh the page aft ...

cssbackbone.js

The mystery of the undetectable null request parameter in jQuery and Java Servlets

I have a JSP file that utilizes jQuery to send a POST request with selected categories from a multi select box to the server. The server then processes the categories and returns a list of subjects for jQuery to display in another multi select box. The is ...

jqueryservletsselect

Is it possible to adjust the width of Material-UI TextField to match the width of the input text?

Is there a way for Material-UI to adjust the width of the TextField element automatically based on the input text? When creating a form view/edit page and rendering data into fields, I also have parameters set by the server. It would be convenient to have ...

cssmaterial-ui

Obtain the distinct highest value for every vertical axis on a bar graph

I'm facing an issue with my code where I am appending multiple SVG elements and generating 3 different charts. The problem is that the maximum value evaluated from the y.domain() for each y-axis is taken as the maximum value from all of my data. Is t ...

javascriptd3.js

In the Firefox browser, tables are shown with left alignment

I recently designed a responsive HTML newsletter with all images neatly wrapped in tables. My goal was to ensure that on smaller screens, the tables stack on top of each other for better readability, while on wider displays, they appear side by side in a r ...

htmlcssemail

Is there a way to retrieve the data selected in my modal window when a button is clicked, depending on the v-for value?

As someone who is new to Vue and utilizing Bootstrap modals to showcase product information, I have grid containers that contain a product image, description, and two buttons. One of the buttons, labeled More details >>, is intended to trigger a moda ...

javascriptvue.jsbootstrap-modal

Simple request results in an error

I have been experimenting with the Electrolyte dependency injection library, but I am encountering an error even when trying a simple script that requires it. I haven't come across any discussions or problems similar to mine in relation to this issue ...

javascriptnode.jsnpm

Enhance your FullCalendar experience with React by displaying extra information on your calendar

I am new to using React and FullCalendar, and I have a page layout similar to the image linked below. Additionally, I have a list of events structured as shown: id: "9", eventId: "1", title: "Training Network", st ...

javascriptreactjstypescriptfullcalendar

Clicking two times changes the background

I am facing an issue with three boxes on my website. Each box is associated with a corresponding div. When I click on any box, the div displays and the background color turns red. However, when I click on the same box again, the div disappears but the back ...

javascripthtmlcss

Utilizing $.each to dynamically add data to a jQuery Mobile listview

Trying to implement a data reading mechanism using ajax resulted in unexpected html tag generation for <ul> <li>. The code snippet is as follows: (function( $, undefined ) { $(document).on("pagecreate", ".jqm-demos", function(){ ...

javascriptjqueryhtmljquery-mobile

Efficient Ways to pass information to an Object within a nested function

const http = require('https'); exports.ip = async (req, res) => { const ip = req.body.ip; const ip_list = ip.trim().split(' '); const count = ip_list.length; var execution_count = 0; var success = {}; // **Creati ...

javascriptnode.jsnpmhttps

Synk: the presence of a self-signed certificate within the certificate chain

Recently, I've been encountering the error message Synk Protect is showing "self-signed certificate in certificate chain" when I try to run npm install on a project of mine. Would appreciate any help or tips on how to identify which out of the 984 pac ...

javascriptnpm

The Jquery append() method seems to be having issues specifically in the Internet Explorer

I am a jQuery 1.10.2 version with the task of inserting an XML node at a specific location within an existing XML structure. To achieve this, I am utilizing the jQuery `append()` function successfully in Chrome, Firefox, and IE Edge; however, it is encount ...

javascriptjquery

The request response was a JSON object that started with the keyword "POST"

My frustration is growing as I encounter a strange issue with the stack template I purchased from envato market. Every time I attempt a simple ajax request, the json returned from my PHP script seems to be invalid. Interestingly, the exact same code works ...

phpjqueryhtmljsonajax

Ajax cannot seem to come to a resolution

After completing my learning on Ajax, I decided to work on a simple project - a port scanner. However, I am facing issues with it as it is not working properly. The only message that pops up is 'Scan started' and I can't figure out what the ...

javascriptajaxget

Tips for utilizing an npm package in conjunction with Hugo

I created a basic hugo site with the following command: hugo new site quickstart Within the layouts/_default/baseof.html file, I have included a JavaScript file named script.js. Inside script.js, the code looks like this: import $ from 'jquery' ...

javascriptjquerynpmhugostatic-site

Guide on sending a JSONArray from ajax to the controller

Currently working with Spring MVC in Java, I am faced with an issue where I am attempting to pass a List from JavaScript to the controller as a JSONArray. However, upon reaching the controller, it is either showing up as an empty array or null. Would grea ...

javajqueryajaxspring-mvc

TypeScript enabled npm package

I am currently developing a npm module using TypeScript. Within my library, I have the following directory structure: . ├── README.md ├── dist │ ├── index.d.ts │ └── index.js ├── lib │ └── index.ts ├── ...

javascriptnode.jstypescriptnpmwebpack