Add data to a size guide

My coding project involved creating a sizing chart using HTML, CSS, and JavaScript. The chart allows users to select their preferred units of measurement (metric or imperial). I used JavaScript to dynamically update the values in the chart based on the selected unit of measurement. While I initially thought this would be straightforward, I seem to have hit a roadblock. Is there anyone who can help me identify where I may have gone wrong in my implementation? Below is a snippet of the code I've been working on:

const metricData = [
  ["72 - 80", "80 - 88", "88 - 96", "81 - 89", "89 - 97", "97 - 109", "109 - 121", "121 - 133", "133 - 145"],
["57 - 65", "65 - 73", "73 - 81", "81 - 89", "89 - 97", "97 - 109", "109 - 121", "121 - 133", "133 - 145"],

];

const imperialData = [
  ["10000 - 80", "80 - 88", "88 - 96", "81 - 89", "89 - 97", "97 - 109", "109 - 121", "121 - 133", "133 - 145"],
["200000 - 65", "65 - 73", "73 - 81", "81 - 89", "89 - 97", "97 - 109", "109 - 121", "121 - 133", "133 - 145"],

];

const measurementSelect = document.getElementById('measurement-select');
const sizingTable = document.getElementById('sizing-table');
const tbody = sizingTable.querySelector('tbody');

measurementSelect.addEventListener('change', function() {
  const selectedOption = measurementSelect.value;
  const data = selectedOption === 'METRIC' ? metricData : imperialData;

  // Loop through the table rows and update the cells with new values
  for (let row = 0; row < data.length; row++) {
    const cells = tbody.querySelectorAll(`[data-row="${row + 2}"]`);
    for (let col = 1; col < cells.length; col++) { 
      cells[col].textContent = data[row][col - 1];
    }
  }
});
table {
  border-collapse: collapse;
  width: 100%;
}

.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
<div class="sizing-chart">
  <div class="toggle">
    <span>Sizing Chart</span>
    <div class="selection">
      <select class="bt-outline" id="measurement-select">
        <option value="METRIC">cm</option>
        <option value="IMPERIAL">inch</option>
      </select>
      <i id="arrowtwo" class="at"></i>
    </div>
  </div>

  <table id="sizing-table">
    <thead>
      <tr>
        <th scope="row" data-column="0" data-row="1" class="even">Size</th>
        <td data-column="1" data-row="1" class="odd">XXS</td>
        <td data-column="2" data-row="1" class="even">XS</td>
        <td data-column="3" data-row="1" class="odd">S</td>
        <td data-column="4" data-row="1" class="even">M</td>
        <td data-column="5" data-row="1" class="odd">L</td>
        <td data-column="6" data-row="1" class="even">XL</td>
        <td data-column="7" data-row="1" class="odd">2XL</td>
        <td data-column="8" data-row="1" class="even">3XL</td>
        <td data-column="9" data-row="1" class="odd">4XL</td>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th scope="row" data-column="0" data-row="2" class="even" system="METRIC">Chest (cm)</th>
        <td data-column="1" data-row="2" class="odd" system="METRIC">72 - 80</td>
        <td data-column="2" data-row="2" class="even" system="METRIC">80 - 88</td>
        <td data-column="3" data-row="2" class="odd" system="METRIC">88 - 96</td>
        <td data-column="4" data-row="3" class="even" system="METRIC">81 - 89</td>
        <td data-column="5" data-row="3" class="odd" system="METRIC">89 - 97</td>
        <td data-column="6" data-row="3" class="even" system="METRIC">97 - 109</td>
        <td data-column="7" data-row="3" class="odd" system="METRIC">109 - 121</td>
        <td data-column="8" data-row="3" class="even" system="METRIC">121 - 133</td>
        <td data-column="9" data-row="3" class="odd" system="METRIC">133 - 145</td>
      </tr>
      <tr>
                 <th scope="row" data-column="0" data-row="3" class="even" system="METRIC">Waist (cm)</th>
                 <td data-column="1" data-row="3" class="odd" system="METRIC">57 - 65</td>
                 <td data-column="2" data-row="3" class="even" system="METRIC">65 - 73</td>
                 <td data-column="3" data-row="3" class="odd" system="METRIC">73 - 81</td>
                 <td data-column="4" data-row="3" class="even" system="METRIC">81 - 89</td>
                 <td data-column="5" data-row="3" class="odd" system="METRIC">89 - 97</td>
                 <td data-column="6" data-row="3" class="even" system="METRIC">97 - 109</td>
                 <td data-column="7" data-row="3" class="odd" system="METRIC">109 - 121</td>
                 <td data-column="8" data-row="3" class="even" system="METRIC">121 - 133</td>
                 <td data-column="9" data-row="3" class="odd" system="METRIC">133 - 145</td>
              </tr>

javascripthtmlcss

Answer №1

There seems to be some errors in the row numbers within your HTML code. It is recommended to review row 2 for accuracy. Below is a snippet with corrections made to address this issue.

const metricData = [
  ["72 - 80", "80 - 88", "88 - 96", "81 - 89", "89 - 97", "97 - 109", "109 - 121", "121 - 133", "133 - 145"],
["57 - 65", "65 - 73", "73 - 81", "81 - 89", "89 - 97", "97 - 109", "109 - 121", "121 - 133", "133 - 145"],

];

const imperialData = [
  ["10000 - 80", "80 - 88", "88 - 96", "81 - 89", "89 - 97", "97 - 109", "109 - 121", "121 - 133", "133 - 145"],
["200000 - 65", "65 - 73", "73 - 81", "81 - 89", "89 - 97", "97 - 109", "109 - 121", "121 - 133", "133 - 145"],

];

const measurementSelect = document.getElementById('measurement-select');
const sizingTable = document.getElementById('sizing-table');
const tbody = sizingTable.querySelector('tbody');

measurementSelect.addEventListener('change', function() {
  const selectedOption = measurementSelect.value;
  const data = selectedOption === 'METRIC' ? metricData : imperialData;

  // Loop through the table rows and update the cells with new values
  for (let row = 0; row < data.length; row++) {
    const cells = tbody.querySelectorAll(`[data-row="${row + 2}"]`);
    for (let col = 1; col < cells.length; col++) { // Start at 1 to skip the header cell
      cells[col].textContent = data[row][col - 1];
    }
  }
});
table {
  border-collapse: collapse;
  width: 100%;
}

.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
<div class="sizing-chart">
  <div class="toggle">
    <span>Sizing Chart</span>
    <div class="selection">
      <select class="bt-outline" id="measurement-select">
        <option value="METRIC">cm</option>
        <option value="IMPERIAL">inch</option>
      </select>
      <i id="arrowtwo" class="at"></i>
    </div>
  </div>
</div>

<table id="sizing-table">
  <thead>
    <tr>
      <th scope="row" data-column="0" data-row="1" class="even">Size</th>
      <td data-column="1" data-row="1" class="odd">XXS</td>
      <td data-column="2" data-row="1" class="even">XS</td>
      <td data-column="3" data-row="1" class="odd">S</td>
      <td data-column="4" data-row="1" class="even">M</td>
      <td data-column="5" data-row="1" class="odd">L</td>
      <td data-column="6" data-row="1" class="even">XL</td>
      <td data-column="7" data-row="1" class="odd">2XL</td>
      <td data-column="8" data-row="1" class="even">3XL</td>
      <td data-column="9" data-row="1" class="odd">4XL</td>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row" data-column="0" data-row="2" class="even" system="METRIC">Chest (cm)</th>
      <td data-column="1" data-row="2" class="odd" system="METRIC">72 - 80</td>
      <td data-column="2" data-row="2" class="even" system="METRIC">80 - 88</td>
      <td data-column="3" data-row="2" class="odd" system="METRIC">88 - 96</td>
      <td data-column="4" data-row="2" class="even" system="METRIC">81 - 89</td>
      <td data-column="5" data-row="2" class="odd" system="METRIC">89 - 97</td>
      <td data-column="6" data-row="2" class="even" system="METRIC">97 - 109</td>
      <td data-column="7" data-row="2" class="odd" system="METRIC">109 - 121</td>
      <td data-column="8" data-row="2" class="even" system="METRIC">121 - 133</td>
      <td data-column="9" data-row="2" class="odd" system="METRIC">133 - 145</td>
    </tr>
    <tr>
       <th scope="row" data-column="0" data-row="3" class="even" system="METRIC">Waist (cm)</th>
       <td data-column="1" data-row="3" class="odd" system="METRIC">57 - 65</td>
       <td data-column="2" data-row="3" class="even" system="METRIC">65 - 73</td>
       <td data-column="3" data-row="3" class="odd" system="METRIC">73 - 81</td>
       <td data-column="4" data-row="3" class="even" system="METRIC">81 - 89</td>
       <td data-column="5" data-row="3" class="odd" system="METRIC">89 - 97</td>
       <td data-column="6" data-row="3" class="even" system="METRIC">97 - 109</td>
       <td data-column="7" data-row="3" class="odd" system="METRIC">109 - 121</td>
       <td data-column="8" data-row="3" class="even" system="METRIC">121 - 133</td>
       <td data-column="9" data-row="3" class="odd" system="METRIC">133 - 145</td>
    </tr>
  </tbody>
</table>

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

Is it possible to automatically move text to the next line once it reaches a specific character limit using HTML/CSS/PHP?

Is there a way to handle text when it reaches the ceiling or exceeds a certain number of characters so that it goes to the next line instead of showing a scrollbar? I have a div element where I display text retrieved from a MySQL database, and sometimes th ...

phphtmlcsstext

What is the best way to emphasize this specific section of text?

Looking for help with my tumblr template. I have the following block of code: {block:IfNotEndlessScroll}{block:Pagination}{block:PreviousPage}Previous Page{/block:PreviousPage} {block:NextPage}Next Page{/block:NextPage}{/block:Pagination}{/block:IfN ...

htmlcss

Trigger an alert after a separate function is completed with jQuery

On my page, I have a function that changes the color of an element. I want to trigger an alert once this action is complete using changecolor(). However, I am unable to modify the changecolor() function due to certain restrictions. Is there a way to dete ...

javascriptjquery

applying a blur effect to the Vue modal mask

Trying to incorporate a blur panel behind my modal using vue.js, however, The issue arises when the modal-mask contains nested content. This makes it challenging to apply the filter: blur() property without blurring everything. Currently, I am only able t ...

htmlcssvue.js

``Navigating the gaps: Finding balance between navigation links

I'm struggling with creating spacing between my navigation links, specifically wanting to add space between each link that is bordered with a black border. I've looked online for solutions but all I find are ways to reduce space instead of adding ...

htmlcss

Picking Layers on Google Maps with Three.js

I have incorporated the google-maps-api-threejs-layer library into my project from this source. Now, I am looking to implement a picking feature. Here is the modified code snippet: <!doctype html> <html> <head> <meta charset=&qu ...

javascriptgoogle-mapsthree.js

Registering the service worker resulted in an error stating "Undefined is not a function"

When attempting to register a service worker using default React code, I discovered that some users were encountering a `TypeError: undefined is not a function` on the line `.then(registration => {` inside the registerValidSW function. Although it works ...

javascriptreactjstypeerrorservice-workerprogressive-web-apps

AngularJS - Creating a dynamic wizard experience using UI-Router

I have set up my routes using ui-router in the following way: $stateProvider .state('root', { url: "", templateUrl: 'path/login.html', controller: 'LoginController' }) .state('basket&a ...

javascriptangularjs

I am still receiving an empty dropdown value despite implementing ng-selected

I am having issues with using ng-selected to retrieve the selected value from a dropdown. Instead of displaying the selected value, it appears blank. Here is the code snippet I have tried: <div> <select id="user_org" ng-model="selectedorg.all ...

javascripthtmlangularjs

React JS makes it simple to create user-friendly cards that are optimized

I have a collection of objects that include a name and description. The name is short and consists of only a few characters, while the description can vary in length. I am looking to showcase this data within Cards in my React project, and have tried using ...

javascriptcssreactjsreact-bootstrap

Ways to increase the size of a div to match the maximum height of its parent container

My current project involves using an angular dialog layout where the API to open and manage the dialog comes from a separate library. The dialog's parent container has a max-height attribute, meaning the dialog's height is determined by its conte ...

htmlcssangular

How can I transfer a particular data value from a div to JavaScript within Laravel 5.0?

Displaying separate square divs based on integers retrieved from the database. This is the front-end view. I want to pass the room ID (code) to a JavaScript function when clicking on these div elements. https://i.stack.imgur.com/aIYTr.png Below is my cur ...

javascriptphpjqueryhtmlcss

Exploring HTML and CSS backgrounds

I am new to CSS and I have a question regarding design. I want to create a form in the center of my webpage (shown as the black box) with a white background that overlaps the body background (represented by the red lines). For reference, please view this ...

htmlcss

Every time I try to use AgGrid selectors, they consistently come back with null results, even though the

I currently have an ag grid in my application: <app-my-component> <ag-grid-angular [gridOptions]="gridOptions" (gridReady)="setGridReady()"> </ag-grid-angular> </app-my-component> When running Karma- ...

javascriptangularjasminekarma-jasmineag-grid

Is it possible to conduct brain.js training sessions multiple times?

Is there a way to specifically train my neural network with new information without having to retrain the entire model, considering the potential performance costs associated with it? The neural network was created using brain.js. ...

javascriptnode.jsbrain.js

Ways to choose an element when all classes are identical but the text content varies?

I'm looking to automate the website, specifically by selecting the Widgets section and clicking on it. The issue is that all the cards have the same class name, only the text inside them differs. I tried using this code snippet: get getWidgetButton() ...

javascriptxpathautomationcucumberwebdriver-io

What is the best way to submit a Redux Form only if there have been changes made to any of the fields

I'm currently using Redux Form version 7.1.2, and I have a form that submits data when the user clicks the submit button. In the function assigned to handle the submission, I perform an action. However, I only want this action to be executed if there ...

javascriptreactjsreact-reduxredux-form

Tips for effectively passing navigation as props in React Navigation with Expo

How can I correctly pass navigation as props to another component according to the documentation? The navigation prop is automatically provided to each screen component in your app. Additionally, To type check our screens, we need to annotate the naviga ...

javascriptreactjstypescriptreact-nativereact-navigation

What is the best way to use a Handlebars file on multiple routes?

I have been working on extracting articles from a news website by scraping them successfully. The data is being displayed properly on the front-end console log, but I am facing an issue with rendering it onto the page using a button - it only appears when ...

javascriptnode.jsexpresshandlebars.js

Navigating to the next sibling child in Angular 1 using Ui-router transition

I'm trying to figure out how to effectively transition between sibling states using $state.go() in ui-router. Imagine a child state with integer-based URLs: /parent/1, parent/2, parent/3 and so on I want to be able to navigate between these child st ...

javascriptangularjsroutesangular-ui-routerstate