Take an input value and play value in another input by Javascript

Question

Take an input value and play value in another input by Javascript

Asked 3 years, 4 months ago

Viewed 28 times

0

Good evening, I would need the user to choose how many classes you want in select and then the system will calculate the value and put in the other input, I don’t know where I’m going wrong if you can help me

    <script type="text/javascript"> 
    // classe 1 classe
        var valorDaMarca = parseFloat('1855.80');
        // demais classes
        var valorDasDemaisClasses = parseFloat('805.20');
      
      var classe = document.getElementById("classes").value
      
        function valorTotal(){
            switch (classe) {
            case 1:
                document.getElementById("pfn_vlr_total").value = valorDaMarca;
            break;
        case 2:
        document.getElementById("pfn_vlr_total").value = valorDaMarca + valorDasDemaisClasses;
        break;
        }
     }
    
</script>
    
<html>
    
    <select id="classes" name="classes" onchange="valorTotal();">
      <option value="1">1 Classe </option>
      <option value="2">2 Classes</option>
      <option value="3">3 Classes</option>
      <option value="4">4 Classes</option>
      <option value="5">5 Classes</option>
      <option value="6">6 Classes</option>
    </select>
    
    <input id="pfn_vlr_total" name="pfn_vlr_total" readonly ="readonly" type="text" class="total text-center" value="0,00" required>

I’ll leave picture of something similar but with radio buttons

Thank you for your attention and help

you need to read the value of the class within the "valueTotal" function. when read the value had not yet been chosen, and is using an outdated value, since the event is onchange, that is, if changed need read again

– Ricardo Pontual

2021/07/06 at 21:36
I get your point but I don’t know how to read it again do you have any idea? For me how is onchange every time I change the option should update the value

– Prozyn

2021/07/07 at 13:00
of course not, you read the value value at a certain point, it won’t automatically update, and you wanted to keep the original value? how to do? only move the line inside the Function to read the value when it changes

– Ricardo Pontual

2021/07/07 at 16:22

1 answer

Browser other questions tagged javascript function select input while

You are not signed in. Login or sign up in order to post.

by Rodrigo M. Castilho • 24 points · Answer 1 · 2021-07-06T22:06:26+00:00

Prozyn, the point is you’re using an improper switch there. And I also believe that the code you wrote is not matching what I understood would be your use case.

The Switch

Switch is a structured way of returning values based on the content of a variable, with a "default" to deal with previously unaddressed cases. To better explain:

function barulhoDoAnimal(animal){
    switch(animal){
        case "cachorro":
            return "latido";
        case "gato":
            return "miado";
        default:
            return "desconhecido";
    }
}

barulhoDoAnimal("gato") // retorna "miado";
barulhoDoAnimal("cachorro") // retorna "latido";
barulhoDoAnimal("cavalo"); // retorna "desconhecido";

What is going wrong

Your case will always return 1855.80 on account of the following factors:

In computation in general, the value 1 represents "true", while the value 0 represents "false".
When a variable has some kind of value in JS, it is true. When it has null value, it is false.

So when you put the "class" variable on the switch, it is filled with a default value. If it is not null, it is true. Being true, it falls in use case 1 (true), and returns the variable valorDaMarca.

How to fix

I’m still not 100% clear on the logic behind your case, but from what I understand, the price of 1 class is set at 1855.80, and each additional would be 805.20. Correct?

If that’s the case, note that for every option you put in, you associate a value. When a change occurs, Javascript triggers an event (in this case, you used the "onChange" event). The value of this event will be the value of the option you selected. Let’s make use of this:

// Associando os valores a constantes
const valorPorClasse = 805.20;
const valorDaMarca = 1855.80;

function valorTotal(event){
    // Colocando o valor selecionado em uma variável e transformando em inteiro
    let quantidadeDeClasses = parseInt(event.target.value);

    // adicionando o valor da marca à multiplicação das demais quantidades
    let valorAPagar = valorDaMarca + ((quantidadeDeClasses - 1) * valorPorClasse);
    
    // associando ao input
    document.getElementById("pfn_vlr_total").value = valorAPagar
}