Как рассчитать скидку на цену и очистить форму при смене переключателя

Question

1) Я пытаюсь рассчитать скидку на цену с помощью этого кода, но он не работает.

2) Я хочу очистить форму при смене переключателя. Например, размер равен M и введите число только при вводе количества. Если я изменю размер, форма будет очищена или после того, как сумма покажет мне. Если я изменю размер, форма тоже будет прозрачной.

 window.addEventListener("load", () => {
    document.getElementById('calculate').addEventListener('click', total)
    }); 

    var total = function () {
    var s = Number(document.querySelector('input[name=size]:checked').value);
    var q = Number(document.getElementById('qty').value);
    var m = document.querySelector('input[name=member]:checked').value;
    var result;
    if(s && q && m) {
        if(q >= 1) {
            if(s == 'S') {
                result = s * q;
            } else if(s == 'M') {
                result = s * q;
            } else if(s == 'L') {
                result = s * q;
            } else {
                result = s * q;
            }
            result -= m === "YES" ? result*5/100 : 0;
        } else {
            result = " ";
        }
    } else {
        result = " ";
    }
    document.getElementById('amount').innerHTML = result.toFixed(2);
    }

    const clearForm = () => {
        document.getElementById('myForm').reset();
    }

    <form id="myForm">
    <div>
        <p>Size:
            <input type="radio" name="size" id="S" value="249">S
            <input type="radio" name="size" id="M" value="269">M
            <input type="radio" name="size" id="L" value="309">L
            <input type="radio" name="size" id="XL" value="319">XL
        </p>
    </div>
    <p>Quantity:
        <input type="text" name="qty" id="qty">
    </p>
    <p>Member:
        <input type="radio" name="member" value="YES">YES
        <input type="radio" name="member" value="NO">NO
    </p>
    <p>Amount: $
        <input type="text" name="amount" id="amount" readonly>
    </p>
    <button type="button" id="calculate">Calculate</button>
    <button type="button" id="clear" onclick="clearForm()">Reset</button>
    </form>

Answer 1

Вам нужно очистить поля ввода при смене переключателя. Найдите рабочую демонстрацию ниже

window.addEventListener("load", () => {
  document.getElementById('calculate').addEventListener('click', total)
});

var total = function() {
  var s = Number(document.querySelector('input[name=size]:checked').value);
  var q = Number(document.getElementById('qty').value);
  var m = document.querySelector('input[name=member]:checked').value;
  var result;
  if (s && q && m) {
    if (q >= 1) {
      if (s == 'S') {
        result = s * q;
      } else if (s == 'M') {
        result = s * q;
      } else if (s == 'L') {
        result = s * q;
      } else {
        result = s * q;
      }
      result -= m === "YES" ? result * 5 / 100 : 0;
    } else {
      result = " ";
    }
  } else {
    result = " ";
  }
  document.getElementById('amount').value = result.toFixed(2);
}

const clearForm = () => {
  document.getElementById('myForm').reset();
}

// Add event listener to all radio items and add the clearfields logic
var memberRadios = document.querySelectorAll('input[type=radio][name="member"]');

var sizeRadios = document.querySelectorAll('input[type=radio][name="size"]');

Array.prototype.forEach.call(memberRadios, function(radio) {
  radio.addEventListener('change', clearFields);
});

Array.prototype.forEach.call(sizeRadios, function(radio) {
  radio.addEventListener('change', clearFields);
});

function clearFields(event) {
  document.getElementById('qty').value = null;
  document.getElementById('amount').value = null;
}

<form id="myForm">
  <p>Member:
    <input type="radio" name="member" value="YES">YES
    <input type="radio" name="member" value="NO">NO
  </p>
  <div>
    <p>Size:
      <input type="radio" name="size" id="S" value="249">S
      <input type="radio" name="size" id="M" value="269">M
      <input type="radio" name="size" id="L" value="309">L
      <input type="radio" name="size" id="XL" value="319">XL
    </p>
  </div>
  <p>Quantity:
    <input type="text" name="qty" id="qty">
  </p>
  <p>Amount: $
    <input type="text" name="amount" id="amount" readonly>
  </p>
  <button type="button" id="calculate">Calculate</button>
  <button type="button" id="clear" onclick="clearForm()">Reset</button>
</form>

Answer 2

Ваши расчеты работают должным образом.

В вашем коде есть одна проблема:

document.getElementById('amount').innerHTML = result.toFixed(2); //Here with innerHTML

входные данные не могут содержать html. Они могут содержать только значение. Свойство innerHTML не идеально подходит для элементов ввода. То, что вы ищете:

document.getElementById('amount').value = result.toFixed(2);

Вы должны установить value вашей суммы, а не innerHTML.

Я только что отредактировал ваш Snipped. Обратите внимание на изменения, которые я внес в ваш код. Многие вещи были ненужными. Как ваши множественные операторы if, проверяющие на 'S', 'M' ... Потому что в конце все они приводят к одному и тому же выражению вычисления.

window.addEventListener("load", () => {
  // clear then textboxes on Size change
  document.querySelectorAll("input[name=size]").forEach(input=>{
    input.addEventListener('change', ()=>{
      clearTextBoxes();
    });
  });
}); 

var computeTotal = () => 
{
  var s = document.querySelector('input[name=size]:checked').value;
  var q = document.getElementById('qty').value;
  var m = document.querySelector('input[name=member]:checked').value;
  var result; //initialize to empty string
  if(s && q && m && q >= 1) {
      result = s * q;
      result -= m === "YES" ? result*5/100 : 0;
  }
  
  // Change innerHTML to value
  document.getElementById('amount').value = result == undefined ? " " : result.toFixed(2);
}

var clearTextBoxes = () => {
  document.getElementById("qty").value = "";
  document.getElementById("amount").value = "";
}

const clearForm = () => {
    document.getElementById('myForm').reset();
}

<form id="myForm">
    <p>Member:
        <input type="radio" name="member" value="YES">YES
        <input type="radio" name="member" value="NO">NO
    </p>
    <div>
        <p>Size:
            <input type="radio" name="size" id="S" value="249">S
            <input type="radio" name="size" id="M" value="269">M
            <input type="radio" name="size" id="L" value="309">L
            <input type="radio" name="size" id="XL" value="319">XL
        </p>
    </div>
    <p>Quantity:
        <input type="number" name="qty" id="qty">
    </p>
    <p>Amount: $
        <input type="text" name="amount" id="amount" readonly>
    </p>
    <button type="button" id="calculate" onclick="computeTotal()">Calculate</button>
    <button type="button" id="clear" onclick="clearForm()">Reset</button>
    </form>