Блог

Главная - Вопросы по программированию - Отображение выбранной информации из конструктора класса в таблицу — Javascript

Отображение выбранной информации из конструктора класса в таблицу — Javascript

#javascript #arrays #constructor

Вопрос:

Я пытаюсь связать выбранные параметры в раскрывающемся списке в форме в html с объектами, созданными с помощью конструктора классов в JS. Я изо всех сил пытаюсь связать их, и мне удается отобразить только некоторые имена, и все в одной строке таблицы html.

В идеале я хотел бы связать элементы в моей функции display() и отображать значения из моих объектов, а не использовать значения непосредственно из формы.

Это мой полный код:

 /* See/add options, remove options, 
see overview of options and price
 */
// VARIABLES 
let button = document.getElementById("submit");
let choice = document.getElementById("choice");
let optionChosen = document.getElementById("option");
let optionPrice = document.getElementById("optionPrice");

// OPTIONS CLASS CONSTRUCTOR
class CarOptions {
    constructor(optionName, price) {
        this.optionName = optionName;
        this.price = price;
    }
}
// create 6 options
let option = new CarOptions("", 0);
let vac = new CarOptions("vac", 150);
let trunk = new CarOptions("trunk", 2000);
let seat = new CarOptions("seat", 550);
let night = new CarOptions("night", 360);
let wifi = new CarOptions("wifi", 1200);
let park = new CarOptions("park", 600);
// Array of all objects
let allOptions = [option, vac, trunk, seat, night, wifi, park];
// Array of all object names
let allOptionsName = [option.optionName, vac.optionName, trunk.optionName, seat.optionName, night.optionName, wifi.optionName, park.optionName];

// EVENTS
// On submit event
button.addEventListener("click", (e) => {
    e.preventDefault();
    const selected = document.querySelectorAll('#choice option:checked');
    // Displaying options names in the table
    // CURRENTLY ALL DISPLAYS IN ONE ROW 
    allOptionsName.forEach(function () {
        for (let i = 0; i < allOptionsName.length; i  ) {
            const values = Array.from(selected).map(el => el.value);
            optionChosen.innerHTML = values;
            console.log(values);
            console.log("this value: "   values);
            display();
        }
    });
})

function display(element) {
    if (values.value != "") {
        optionChosen.innerHTML = element.optionName;
        optionPrice.innerHTML = element.price;
    }
    return;
} 
 body {
    background-color: black;
    color: white;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}
#form {
    display: flex;
    flex-direction: column;
    width: 250px;
    align-items: center;
}
#choice {
    height: 120px;
}
.results {
    width: 300px;
    border: 2px dotted green;
    margin: 10px;
    text-align: center;
} 
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Car Selection</title>
</head>

<body>
    <h1>Car Choice</h1>
    <h2>Ready to buy your dream car?</h2>
    <div class="select">
        <!-- Selection of food or drink -->
        <form class="flexColumn" id="form">
            <select name="choice" id="choice" multiple="true">
                <option value="" name="">--Please choose an option--</option>
                <option id="vac" value="vac" name="vac">Built-in Vacuum (€150)</option>
                <option value="trunk" name="trunk">Automatic Opening Trunk (€2000)</option>
                <option value="seat" name="seat">Massaging Seats (€550)</option>
                <option value="night" name="night">Nightvision Dashboard System (€360)</option>
                <option value="wifi" name="wifi">WiFi/Entertainment/Navigation (€1200)</option>
                <option value="park" name="park">Self-Parking System (€600)</option>
            </select>
            <button id="submit" class="submit" submit>SUBMIT</button>
        </form>
        <p>Your current selected options:</p>
        <div id="selection" class="selection">
            <table class="results" style="width:200px">
                <tr>
                    <th>Option</th>
                    <th>Price (€)</th>
                </tr>
                <tr id="emptyRow">
                    <td id="option"></td>
                    <td id="optionPrice"></td>
                </tr>
                <tr>
                    <td>TOTAL:</td>
                    <td id="totalPrice"></td>
                </tr>
            </table>
        </div>
    </div>

    <script type="text/javascript" src="script.js"></script>

</body>

</html>

Комментарии:

1. Вы ожидаете аргумента, function display(element) но когда вы вызываете его в прослушивателе событий «щелчок», вы не предоставили никаких аргументов. Также вы пытаетесь получить доступ к «значениям» в display функции, которая не определена в display , но в click функции. Что вы пытаетесь передать display функции? Сначала исправьте эти проблемы, отредактируйте свой код и опубликуйте правильный.

Ответ №1:

Попробуйте, как в следующем фрагменте:

 /* See/add options, remove options, 
see overview of options and price
 */
// VARIABLES 
let button = document.querySelector("#submit");
let choice = document.querySelector("#choice");

// OPTIONS CLASS CONSTRUCTOR
class CarOptions {
  constructor(optionName, price) {
    this.optionName = optionName;
    this.price = price;
  }
}
// create 6 options
let option = new CarOptions("", 0);
let vac = new CarOptions("vac", 150);
let trunk = new CarOptions("trunk", 2000);
let seat = new CarOptions("seat", 550);
let night = new CarOptions("night", 360);
let wifi = new CarOptions("wifi", 1200);
let park = new CarOptions("park", 600);
// Array of all objects
let allOptions = [option, vac, trunk, seat, night, wifi, park];
// Array of all object names
let allOptionsName = [option.optionName, vac.optionName, trunk.optionName, seat.optionName, night.optionName, wifi.optionName, park.optionName];

// EVENTS
// On submit event
button.addEventListener("click", (e) => {
  e.preventDefault();
  const selected = document.querySelectorAll('#choice option:checked');
  const values = Array.from(selected).map(el => el.value);
  const res = allOptions.filter(a => values.includes(a.optionName))
  const total = res.reduce((acc, v) => acc  = v.price, 0 )
  display(res, total);
})
function createTr() {
  let tbodyRef = document.querySelectorAll("#cars");
  let newRow = tbodyRef[0].insertRow();
  return newRow
}
function createTd(el, newTr) {
  let newel = document.createElement('td');
  let elementid = document.querySelectorAll("td").length
  newel.setAttribute('id',elementid);
  newel.innerHTML = el
  newTr.appendChild(newel);
}
function display(element, total) {
  element.forEach(e => {
    const newTr = createTr()
    createTd(e.optionName, newTr)
    createTd(e.price, newTr)
  })
  const tot = document.querySelector("#totalPrice")
  tot.innerHTML = total
} 
 body {
    background-color: black;
    color: white;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}
#form {
    display: flex;
    flex-direction: column;
    width: 250px;
    align-items: center;
}
#choice {
    height: 120px;
}
.results {
    width: 300px;
    border: 2px dotted green;
    margin: 10px;
    text-align: center;
} 
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Car Selection</title>
</head>

<body>
    <h1>Car Choice</h1>
    <h2>Ready to buy your dream car?</h2>
    <div class="select">
        <!-- Selection of food or drink -->
        <form class="flexColumn" id="form">
            <select name="choice" id="choice" multiple="true">
                <option value="" name="">--Please choose an option--</option>
                <option id="vac" value="vac" name="vac">Built-in Vacuum (€150)</option>
                <option value="trunk" name="trunk">Automatic Opening Trunk (€2000)</option>
                <option value="seat" name="seat">Massaging Seats (€550)</option>
                <option value="night" name="night">Nightvision Dashboard System (€360)</option>
                <option value="wifi" name="wifi">WiFi/Entertainment/Navigation (€1200)</option>
                <option value="park" name="park">Self-Parking System (€600)</option>
            </select>
            <button id="submit" class="submit" submit>SUBMIT</button>
        </form>
        <p>Your current selected options:</p>
        <div id="selection" class="selection">
            <table class="results" style="width:200px">
                <tr>
                    <th>Option</th>
                    <th>Price (€)</th>
                </tr>
                <tbody id="cars">
                <tbody>
                <tfoot>
                  <tr>
                    <td>TOTAL:</td>
                    <td id="totalPrice"></td>
                  </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <script type="text/javascript" src="script.js"></script>

</body>

</html>

Комментарии:

1. Сделали, отлично. Мне просто нужно выяснить, как сделать его реактивным, когда я выбираю или отменяю выбор (в настоящее время он просто добавляет элементы), и добавить кнопку удаления 🙂

2. Вы можете создать другой список, заполненный выбранными элементами, и прикрепить событие в этот новый список, чтобы при нажатии удалить выбранный элемент

3. Хорошо, я попробую. На данный момент я справился с кнопкой сброса формы:

4. Кнопка сброса.addEventListener(«щелчок», () => { Форма ввода.сброс(); })

Ответ №2:

Параметры отображаются в одной строке, потому что вы выбрали только одну строку таблицы и вставили в нее все свои значения. Вам нужно будет создать строку таблицы для каждого из ваших значений. Чтобы отобразить значения в строках, попробуйте сделать следующее: —

 /* See/add options, remove options, 
see overview of options and price
 */
// VARIABLES 
let button = document.getElementById("submit");
let choice = document.getElementById("choice");
let row = document.getElementById('emptyRow');
let totalPriceElement = document.getElementById('totalPrice');

// OPTIONS CLASS CONSTRUCTOR
class CarOptions {
    constructor(optionName, price) {
        this.optionName = optionName;
        this.price = price;
    }
}
// create 6 options
let option = new CarOptions("", 0);
let vac = new CarOptions("vac", 150);
let trunk = new CarOptions("trunk", 2000);
let seat = new CarOptions("seat", 550);
let night = new CarOptions("night", 360);
let wifi = new CarOptions("wifi", 1200);
let park = new CarOptions("park", 600);
// Array of all objects
let allOptions = [option, vac, trunk, seat, night, wifi, park];
// Array of all object names
let allOptionsName = [option.optionName, vac.optionName, trunk.optionName, seat.optionName, night.optionName, wifi.optionName, park.optionName];

// EVENTS
// On submit event
button.addEventListener("click", (e) => {
    e.preventDefault();
    const selected = document.querySelectorAll('#choice option:checked');
    // Displaying options names in the table
    // CURRENTLY ALL DISPLAYS IN ONE ROW 

   
        for(let i = 0; i < selected.length;i  ){
            
            const values = Array.from(selected).map(el => el.value);
            const element = allOptions.filter(option => {
                return option.optionName == values[i];
                
            });
          
            var tableRow = document.createElement('TR');
            var tableCellName = document.createElement('TD');
            var tableCellPrice = document.createElement('TD');
            tableCellName.setAttribute('class','option');
            tableCellName.innerText = values[i];
            tableCellPrice.setAttribute('class','price');
            tableCellPrice.innerText = element[0].price;
            tableRow.appendChild(tableCellName);
            tableRow.appendChild(tableCellPrice);
            row.appendChild(tableRow);
          

         
            if(i == selected.length - 1){
                display(values);
            }
       }
        
   
})

function display(values) {
    const elements = allOptions.filter(option => {
       
        for(let i = 0; i < values.length; i  ){
            if(option.optionName == values[i]){
                return option; 
            }
            else{
                continue;
            }
        }
    })
    let totalPrice = 0;
    for(let i = 0; i<elements.length;i  ){
        totalPrice  = elements[i].price;
    }
    totalPriceElement.innerText = totalPrice;
    return;
} 
 body {
    background-color: black;
    color: white;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}
#form {
    display: flex;
    flex-direction: column;
    width: 250px;
    align-items: center;
}
#choice {
    height: 120px;
}
.results {
    width: 300px;
    border: 2px dotted green;
    margin: 10px;
    text-align: center;
} 
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Car Selection</title>
</head>

<body>
    <h1>Car Choice</h1>
    <h2>Ready to buy your dream car?</h2>
    <div class="select">
        <!-- Selection of food or drink -->
        <form class="flexColumn" id="form">
            <select name="choice" id="choice" multiple="true">
                <option value="" name="">--Please choose an option--</option>
                <option id="vac" value="vac" name="vac">Built-in Vacuum (€150)</option>
                <option value="trunk" name="trunk">Automatic Opening Trunk (€2000)</option>
                <option value="seat" name="seat">Massaging Seats (€550)</option>
                <option value="night" name="night">Nightvision Dashboard System (€360)</option>
                <option value="wifi" name="wifi">WiFi/Entertainment/Navigation (€1200)</option>
                <option value="park" name="park">Self-Parking System (€600)</option>
            </select>
            <button id="submit" class="submit" submit>SUBMIT</button>
        </form>
        <p>Your current selected options:</p>
        <div id="selection" class="selection">
            <table class="results" style="width:200px">
                <tr>
                    <th>Option</th>
                    <th>Price (€)</th>
                </tr>
                <tbody id="emptyRow">
                    
                </tbody>
                <tr>
                    <td>TOTAL:</td>
                    <td id="totalPrice"></td>
                </tr>
            </table>
        </div>
    </div>

    <script type="text/javascript" src="script.js"></script>

</body>

</html>

Этот код заставит ваши опции отображаться в нескольких строках вместе с ценой и общей ценой.

Метки: