How can I output the shipping-cost value in this code?-CodePudding

I'm newbie, I want to understand.

Cant output shipping-cost value.

It seems like I'm doing everything right, but I'm not getting the result.

I will be very grateful for your help

Code:

<select  name = "shipping" id="country" required>
  <option value="">Choose...</option>
  <option value="DPD">DPD</option>
  <option value="DHL">DHL</option>
  <option value="DHL Express">DHL Express</option>
</select>
</label>

<div ></div>

<script type="text/javascript">
  const selectElement = document.querySelector('.form-select');

  selectElement.addEventListener('change', (event) => {
    const result = document.querySelector('.result');
    result.textContent = `You chose ${event.target.value}`;
  });
</script>

<div ></div>

<script type="text/javascript">

  const shippingCost = document.querySelector('.text-success');
  const shippingCostDisplay = document.querySelector('.shipping-cost');

  selectElement.addEventListener('change', (event) => {
    const result = document.querySelector('.result');
    result.textContent = `You chose ${event.target.value}`;
    switch(event.target.value) {
    case 'DPD':
      shippingCost.textContent = '$5';
      break;
    case 'DHL':
      shippingCost.textContent = '$10';
      break;
    case 'DHL Express':
      shippingCost.textContent = '$15';
      break;
    default:
      shippingCost.textContent = '$0';
    }
    shippingCostDisplay.innerHTML = shippingCost.textContent;
  });

</script>

It seems like the line <div ></div> should be responsible for this, but, unfortunately, it does not perform any function

CodePudding user response：

You are missing <div ></div>.

M.Eriksson is correct with his question in the comment.

Why?

Because you are missing div with class text-success, but you are trying to set it's value in switch, hence javascript throughs an error (mentioned by David)

Here is a working example (refactored just a bit your code)

const selectElement = document.querySelector('.form-select');
const shippingCost = document.querySelector('.text-success');
const shippingCostDisplay = document.querySelector('.shipping-cost');

  selectElement.addEventListener('change', (event) => {
    const result = document.querySelector('.result');
    result.textContent = `You chose ${event.target.value}`;
    switch(event.target.value) {
    case 'DPD':
      shippingCost.textContent = '$5';
      break;
    case 'DHL':
      shippingCost.textContent = '$10';
      break;
    case 'DHL Express':
      shippingCost.textContent = '$15';
      break;
    default:
      shippingCost.textContent = '$0';
    }
    shippingCostDisplay.innerHTML = shippingCost.textContent;
  });

<form>
<select  name = "shipping" id="country" required>
  <option value="">Choose...</option>
  <option value="DPD">DPD</option>
  <option value="DHL">DHL</option>
  <option value="DHL Express">DHL Express</option>
</select>
</form>

<div ></div>

<div ></div>

<div ></div>

I would refactor your task like this:

const selectElement = document.querySelector('.form-select');
const shippingCost = document.querySelector('.text-success');
const shippingCostDisplay = document.querySelector('.shipping-cost');

  selectElement.addEventListener('change', (event) => {
    const result = document.querySelector('.result');
    result.textContent = `You chose ${event.target.value}`;
    shippingCostDisplay.textContent = shippingCost.textContent = event.target.value;
  });

<form>
<select  name = "shipping" id="country" required>
  <option value="$0">Choose...</option>
  <option value="$5">DPD</option>
  <option value="$10">DHL</option>
  <option value="$15">DHL Express</option>
</select>
</form>

<div ></div>

<div ></div>

<div ></div>