Javascript не добавляет выбранные значения в переключатели при запуске функции

Question

Я создал тестовый веб-сайт, чтобы узнать немного js, сделав интернет-магазин, в котором, в основном, есть значения в форме, в которой я застрял, когда мой html вызывает функцию при отправке, не добавляя доставку должным образом ( только для земли, которая, по-видимому, по умолчанию) Мне нужна возможность сценария рассчитать правильную стоимость доставки в зависимости от выбранной радиокнопки

function calcTaxes() {
    cost = 10;
    var taxed = cost * document.getElementById("qty").value;
    var freight = document.getElementById("shipping").value;
    var freightNum = parseInt(freight, 10);
    var totalCost;
    
   
    if (taxed < 10){
        taxed = (taxed * .1) + taxed;
        totalCost = taxed + freightNum;
        document.getElementById("tax").innerHTML = "$" +totalCost;

    }
    else if (taxed > 10 && taxed < 20){
        taxed = (taxed * .0725) + taxed;
        totalCost = taxed + freightNum;
        document.getElementById("tax").innerHTML = "$" +totalCost;
    }
    else {
        taxed = (taxed * .05) + taxed;
        totalCost = taxed + freightNum;
        document.getElementById("tax").innerHTML = "$" +totalCost;
    }

}

  <h2>Order Form -- T-shirts $10 each</h2>
        <br>
        <form>
            Name: <input type="text" placeholder="Your name here" ><br><br>
            Address: <textarea placeholder="Your Address"></textarea><br><br>
            Email: <input type="email" placeholder="Your email address" ><br><br>
            <label for="size">Choose a size: (Same Price) </label>
            <select id="size" name="size">
                <option value="XS">XS -Extra Small</option>
                <option value="S">S-Small</option>
                <option value="M">M-Medium</option>
                <option value="L">L-Large</option>
                <option value="XL">XL-Extra Large</option>
                <option value="XXL">XXL-Extra Extra Large</option>
            </select><br><br>
            Color: <input type="radio" value="Black" name="color">Black
            <input type="radio" value="White" name="color">White
            <input type="radio" value="Gun-Metal" name="color">Gun-Metal 
            <br><br>
            Quantity: <input id="qty" type="number"><br><br>
            Shipping: <input type="radio" value= "10" id="shipping" name="shipp">Ground ($10)
            <input type="radio" value="20" id="shipping" name="shipp" >Overnight ($20)
            <input type="radio" value="25" id="shipping" name="shipp" >Drone-Drop ($25)
            <br><br>
        <br>
        
        </form>
            <button class="taxes" onclick="calcTaxes()">Calculate Total</button><br>
            Includes shipping and taxes:<p id="tax"></p>
</body>

</html>

Answer 1

Проблема в том, что вы используете document.getElementById, который всегда будет возвращать первый элемент с отправкой.

Попробуйте использовать document.getElementsByName

Помните, что он вернет массив элементов

Answer 2

Итак, что я вижу, стоимость фрахта присваивается первому значению, так как он вызывает первый идентификатор с именем shipping с document.getElementById('shipping').

Вы можете назначить каждую радиокнопку с onclick="myShippingCost(this.value)" и в вашем JS вызовите эту функцию, если ваш основной calcTaxes().

Пример:

var radioValue;

myShippingCost(value) {
  radioValue = value;
}

calcTaxes() {
  // ...your code
  var freight = radioValue;
  // ...your code
}

Answer 3

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

var freight = document.querySelector('input[name="shipp"]:checked').value;

function calcTaxes() {
  cost = 10;
  var taxed = cost * document.getElementById("qty").value;
  var freight = document.querySelector(`input[name="shipp"]:checked`)
    .value;

  var freightNum = parseInt(freight, 10);
  var totalCost;

  if (taxed < 10) {
    taxed = taxed * 0.1 + taxed;
    totalCost = taxed + freightNum;
    document.getElementById("tax").innerHTML = "$" + totalCost;
  } else if (taxed > 10 && taxed < 20) {
    taxed = taxed * 0.0725 + taxed;
    totalCost = taxed + freightNum;
    document.getElementById("tax").innerHTML = "$" + totalCost;
  } else {
    taxed = taxed * 0.05 + taxed;
    totalCost = taxed + freightNum;
    document.getElementById("tax").innerHTML = "$" + totalCost;
  }
}

<h2>Order Form -- T-shirts $10 each</h2>
<br />
<form>
  Name: <input type="text" placeholder="Your name here" /><br /><br /> Address: <textarea placeholder="Your Address"></textarea><br /><br /> Email: <input type="email" placeholder="Your email address" /><br /><br />
  <label for="size">Choose a size: (Same Price) </label>
  <select id="size" name="size">
    <option value="XS">XS -Extra Small</option>
    <option value="S">S-Small</option>
    <option value="M">M-Medium</option>
    <option value="L">L-Large</option>
    <option value="XL">XL-Extra Large</option>
    <option value="XXL">XXL-Extra Extra Large</option>
  </select><br /><br /> Color: <input type="radio" value="Black" name="color" />Black
  <input type="radio" value="White" name="color" />White
  <input type="radio" value="Gun-Metal" name="color" />Gun-Metal
  <br /><br /> Quantity: <input id="qty" type="number" /><br /><br /> Shipping:
  <input type="radio" value="10" id="shipping" name="shipp" />Ground ($10)
  <input type="radio" value="20" id="shipping" name="shipp" />Overnight ($20)
  <input type="radio" value="25" id="shipping" name="shipp" />Drone-Drop ($25) <br /><br />
  <br />
</form>
<button class="taxes" onclick="calcTaxes()">Calculate Total</button><br /> Includes shipping and taxes:
<p id="tax"></p>