Получить общие значения флажков и выбранное значение раскрывающегося списка в Javascript?

Question 1

Я установил раскрывающийся список на ноль. Можно ли изменить его на единицу после того, как будет установлен первый флажок? Другая проблема - это расчет. Итак, после установки флажка и изменения количества (скажем, я выбираю количество = 2, поэтому сумма к оплате будет 370), если я выберу что-то из дополнительных элементов, количество рабочего стола будет сброшено до базовой цены = 185 (количество = 1)

var amountDue = document.getElementById("amountDue");
var desktopAddOns = document.querySelectorAll(".products");

var selectOptions = document.getElementById("selectbasic");
var selectedValue;

var total = 0;
var price = 0;

//Removes the add on options from view
document.getElementById("desktops").onchange = function () {
  if (document.getElementById("desktops").checked) {
    price = 185;
  } else if (document.getElementById("desktops").checked == false) {
    price = 185;
    removeAddOns(price);
  }
  addAddOns(price);
};
document.getElementById("wirelessCard").onchange = function () {
    if (document.getElementById("wirelessCard").checked) {
        price = 30;
    } else if (document.getElementById("wirelessCard").checked == false) {
        price = 30;
        removeAddOns(price);
    }
    addAddOns(price);
};
//amountDue.innerHTML += total;
function addAddOns(price) {
  total += price;
  amountDue.innerHTML = total;
}
function removeAddOns(price) {
  total -= price * 2;
  amountDue.innerHTML = total;
}

selectOptions.addEventListener('change', () => {
  selectedValue =  selectOptions.options[ selectOptions.selectedIndex].value;

  amountDue.innerHTML = Math.round(total * selectedValue);
})

<div class=" products">
    <div class="form-group">
        <label for="chkYes1">
            <input type="checkbox" id="desktops" name="" value="desktops" />
            desktop $185.00 &nbsp;&nbsp;
        </label>
    </div>
    <select id="selectbasic" name="" class="">
        <option value="1">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</div><br>


                <label class=" font-weight-bold" for="checkboxes">Extra Items for Purchase
                    (Desktop)</label>
                <div>
                    <div class="extraItemsDesktop">
                        <label for="checkboxes-0">
                            <input type="checkbox" name="wirelessCard" id="wirelessCard" value="wirelessCard">
                            Wireless Card - $30.00
                        </label>
                    </div>


<div class="form-group border border-dark rounded py-3 px-5">
    <h3>Amount Due: <p id="amountDue">0</p>
    </h3>
</div>

javascript

0

Sam 28 Окт 2019 в 07:12

Answer

Попробуйте приведенный ниже модифицированный код:

var amountDue = document.getElementById("amountDue");
var desktopAddOns = document.querySelectorAll(".products");

var selectOptions = document.getElementById("selectbasic");

function calculateTotal() {
  var oDesktopAddOn = document.getElementById("desktops");
  var oWirelessCardAddOn = document.getElementById("wirelessCard");
  var dTotal = 0;

  if (oDesktopAddOn.checked) {
    dTotal += 185;

    var iNumberofItems = selectOptions.options[selectOptions.selectedIndex].value;
    dTotal = Math.round(dTotal * iNumberofItems);
  }

  if (oWirelessCardAddOn.checked) {
    dTotal += 30;
  }

  amountDue.innerHTML = dTotal;
}

document.getElementById("desktops").addEventListener("change", function() {
  selectOptions.value = 1;
  calculateTotal();
});
document.getElementById("wirelessCard").addEventListener("change", calculateTotal)
selectOptions.addEventListener('change', calculateTotal);

<div class=" products">
  <div class="form-group">
    <label for="chkYes1">
            <input type="checkbox" id="desktops" name="" value="desktops" />
            desktop $185.00 &nbsp;&nbsp;
        </label>
  </div>
  <select id="selectbasic" name="" class="">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
</div><br>


<label class=" font-weight-bold" for="checkboxes">Extra Items for Purchase
                    (Desktop)</label>
<div>
  <div class="extraItemsDesktop">
    <label for="checkboxes-0">
                            <input type="checkbox" name="wirelessCard" id="wirelessCard" value="wirelessCard">
                            Wireless Card - $30.00
                        </label>
  </div>


  <div class="form-group border border-dark rounded py-3 px-5">
    <h3>Amount Due:
      <p id="amountDue">0</p>
    </h3>
  </div>

1

user2932057 28 Окт 2019 в 07:53

Question 2

Попробуйте приведенный ниже модифицированный код:

var amountDue = document.getElementById("amountDue");
var desktopAddOns = document.querySelectorAll(".products");

var selectOptions = document.getElementById("selectbasic");

function calculateTotal() {
  var oDesktopAddOn = document.getElementById("desktops");
  var oWirelessCardAddOn = document.getElementById("wirelessCard");
  var dTotal = 0;

  if (oDesktopAddOn.checked) {
    dTotal += 185;

    var iNumberofItems = selectOptions.options[selectOptions.selectedIndex].value;
    dTotal = Math.round(dTotal * iNumberofItems);
  }

  if (oWirelessCardAddOn.checked) {
    dTotal += 30;
  }

  amountDue.innerHTML = dTotal;
}

document.getElementById("desktops").addEventListener("change", function() {
  selectOptions.value = 1;
  calculateTotal();
});
document.getElementById("wirelessCard").addEventListener("change", calculateTotal)
selectOptions.addEventListener('change', calculateTotal);

<div class=" products">
  <div class="form-group">
    <label for="chkYes1">
            <input type="checkbox" id="desktops" name="" value="desktops" />
            desktop $185.00 &nbsp;&nbsp;
        </label>
  </div>
  <select id="selectbasic" name="" class="">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
</div><br>


<label class=" font-weight-bold" for="checkboxes">Extra Items for Purchase
                    (Desktop)</label>
<div>
  <div class="extraItemsDesktop">
    <label for="checkboxes-0">
                            <input type="checkbox" name="wirelessCard" id="wirelessCard" value="wirelessCard">
                            Wireless Card - $30.00
                        </label>
  </div>


  <div class="form-group border border-dark rounded py-3 px-5">
    <h3>Amount Due:
      <p id="amountDue">0</p>
    </h3>
  </div>

1

user2932057 28 Окт 2019 в 07:53

Получить общие значения флажков и выбранное значение раскрывающегося списка в Javascript?

1 ответ

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript