Рассчитать цену переключателя и выпадающего списка

У меня есть список переключателей и раскрывающийся список, которые заполняются из базы данных:

  <ul id = "radio" class = "input-list">
  <?php
  $stmt = mysqli_prepare($link, "SELECT id, name, price FROM cases ORDER BY price");
  $stmt->execute();
  $stmt->bind_result($case_id, $case_name, $case_price);
  while($stmt->fetch()) {
  echo '<li>
 <input class = "selectedoptions" id = "'.$case_id.'" name = "config-prod" value = "'.$case_price.'" type = "radio">
  <label class = "sub-label" for = "'.$case_id.'">'.$case_name.'         [£'.$case_price.']</label>
 </li>';
 }
 $stmt->close();
 ?>
 </ul>

  <?php
  echo "<select class='form-control' id='plist' name='partlist'>";
  $type = "processors";

 $stmt2 = mysqli_prepare($link, "SELECT id, name, price FROM parts WHERE type=?");
 $stmt2->bind_param("s", $type);
 $stmt2->execute();
 $stmt2->bind_result($cpu_id, $cpu_name, $cpu_price);
 while($stmt2->fetch()){
  echo "<option value='$cpu_price'>$cpu_name</option>";
 }
 $stmt2->close();
 echo "</select>";
 ?>

Я хотел бы иметь возможность получить цену выбранного товара из двух списков. Я пытался сделать это с помощью JS:

<script>

    var buildcost = 25.00;

    function updateTotal() {
    var radios = document.getElementsByName('config-prod');
    var partcost;

    for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {
                partcost = parseInt(radios[i].value);
            break;
        }
    }

    total_cost = buildcost + partcost;
    document.getElementById('total').innerHTML = total_cost;

}
</script>

total_cost должен быть выведен сюда:

<input name = "buildTotal" id = "total" type = "text" class = "transparentFieldy float-price" disabled = "" />

Однако это ничего не выводит. Как мне изменить это, чтобы иметь возможность рассчитать цену на основе выбранных элементов? Спасибо!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы установить содержимое элементов ввода, вы должны использовать свойство value вместо innerHTML. Вам также следует рассмотреть возможность использования parseFloat, если вы имеете дело с валютой.

let buildcost = 25.00;

function updateTotal() {
  let radios = document.getElementsByName('config-prod');
  let select = document.getElementById('plist');
  let partcost = 0;

  for (let i = 0, j = radios.length; i < j; i++) {
    if (radios[i].checked) {
      partcost = parseFloat(radios[i].value);
      break;
    }
  }
  
  partcost += parseFloat(select.options[select.selectedIndex].value);
  
  let total_cost = buildcost + partcost;
  document.getElementById('total').value = total_cost.toFixed(2);
}
<ul id = "radio" class = "input-list">
  <li>
    <input id = "item-1" name = "config-prod" value = "1.00" type = "radio" onchange = "updateTotal();">
    <label for = "item-1">Item 1 [£1.00]</label>
  </li>
  <li>
    <input id = "item-2" name = "config-prod" value = "12.34" type = "radio" onchange = "updateTotal();">
    <label for = "item-2">Item 2 [£12.34]</label>
  </li>
  <li>
    <input id = "item-3" name = "config-prod" value = "9.99" type = "radio" onchange = "updateTotal();">
    <label for = "item-3">Item 3 [£9.99]</label>
  </li>
</ul>

<select id = "plist" name = "partlist" onchange = "updateTotal();">
  <option value = "99.99">CPU 1</option>
  <option value = "123.00">CPU 2</option>
  <option value = "250.54">CPU 3</option>
</select>

<br>
Total: <input id = "total" type = "text"><button id = "update" onclick = "updateTotal();">Update</button>

Спасибо. Можно ли добиться этого, не требуя кнопки обновления?

user10208257 29.05.2019 18:16

Другие вопросы по теме