Create a price change button

Question

How do I create a button, that when clicking "pp" appears the value "r$70,00" and "p" appears "r$100,00", "M" "r$150,00" and "G" "r$180,00"

I want to use html and js, Look how you do now,

<select style="margin: 0 5% 0 13%;" name="service" required class="border-box-contact">
            <option value="" disabled selected>Tamanho</option>
            <option value = 1>PP (~1,2kg)</option>
            <option value = 2>P (~1,8kg)</option>
            <option value = 3>M (~2,5kg)</option>
            <option value = 4>G (~3,5kg)</option>

            <script>
                if( value = 1){
                    return "Preço: R$ 70,00"
                }else if (value = 2){
                    return "Preço: R$ 100,00"
                }else if (value = 3){
                    return "Preço: 150,00"
                }else if (value = 4){
                    return "Preço: 180,00"
                }
            </script>

I’m not getting to play, somebody help me?

Answer 1

Create an object with these values and then listen to choices on select with .addEventListener('change', function() {. So you can know the price linked to each option...

An example would be like this:

const precos = {
  1: '70,00',
  2: '100, 00',
  3: '150,00',
  4: '180,00'
};

const produtos = document.querySelector('select[name="service"]');
const mostradoPreco = document.querySelector('#preco span');

produtos.addEventListener('change', function() {
  mostradoPreco.textContent = precos[this.value];
});

<select style="margin: 0 5% 0 13%;" name="service" required class="border-box-contact">
  <option value="" disabled selected>Tamanho</option>
  <option value=1>PP (~1,2kg)</option>
  <option value=2>P (~1,8kg)</option>
  <option value=3>M (~2,5kg)</option>
  <option value=4>G (~3,5kg)</option>
</select>

<p id="preco">Preço: R$ <span></span></p>

Answer 2

I don’t know if this is exactly what you need, but I used jQuery with some functions, .change(); so that when changing the value of the select it is executed. a .text(); to update the span in question with the value;

$("#service").change(function() {
  var value = $(this).children("option:selected").val();
  if (value == 1) {
    $("#valor").text("Preço: R$ 70,00");
  } else if (value == 2) {
    $("#valor").text("Preço: R$ 100,00");
  } else if (value == 3) {
    $("#valor").text("Preço: R$ 150,00");
  } else if (value == 4) {
    $("#valor").text("Preço: R$ 180,00");
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="service" style="margin: 0 5% 0 13%;" name="service" required class="border-box-contact">
  <option value="" disabled selected>Tamanho</option>
  <option value=1>PP (~1,2kg)</option>
  <option value=2>P (~1,8kg)</option>
  <option value=3>M (~2,5kg)</option>
  <option value=4>G (~3,5kg)</option>
</select>
<span id="valor" class="valor"></span>

Test and see if that’s what you need.