personalize the service to be provided (e.g.: inform the amount of private-classroom hours you want to hire)

Question

personalize the service to be provided (e.g.: inform the amount of private-classroom hours you want to hire)

Asked 5 years ago

Viewed 32 times

0

In this exercise I want to create a system in Javascript personalize a service request, in this case private JS lessons. My intention was to show the user a div that presented a new form when they wanted to select the payment per class, this form asks for the amount of hours and number of days in the week that the student would request Java Script lessons. For that I created a function formqtd I think it works. But at the time of the click of the send button, the reply saying the price of the service does not appear, in the same way for the monthly payment.

SCRIPT
```Java script

        function formqtd()
        {
            if(document.getElementById("aulaCheck").checked)
            {
                document.getElementById("formqtd").style.display="block";
                document.getElementById("botao2").style.display="block";
                document.getElementById("botao1").style.display="none";
            }
            else if (document.getElementById("mesCheck").checked) 
            {
                document.getElementById("formqtd").style.display="none";
                document.getElementById("botao2").style.display="none";
                document.getElementById("botao1").style.display="block";
            }
        }

        function aulaP(){



            let pagaula = document.getElementById("aulaCheck").value;
            let pagmes = document.getElementById("mesCheck").value;
            let qtdhora = Number(document.getElementById("hora").value);
            let qtddias = Number(document.getElementById("dias").value);
            let resposta = "";

            if(pagaula.checked)
            {
                let pagaula = 30;
                let precoaula = (pagaula * qtdhora);
                let pagfinal = precoaula * qtddias;

                document.getElementById("aulaP()").innerHTML  = ("O plano aula é" + pagaula + " por hora. Já que você precisará de " + qtdhora + " horas por aula, durante " + qtddias + " na semana, o preço final é: " + pagfinal.toFixed(2));
            }
            else if (pagmes.checked)
            {
                let pagmes = 280;
                let pagfinal = pagmes;

                resposta = ("O pagamento final do plano mensal é:" + pagfinal.toFixed(2));
            }
            let respostafinal = resposta;
            document.getElementById("aulaP()").innerHTML = respostafinal;
        }

    ```

HTML

<html>
<body>
 <div class="conteudo">
                <h1>Aulas Particulares</h1><br>
                <h2>Aulas JS</h2>
                <h3> R$30 a hora/aula ou plano mensal R$280 </h3>
                <form>
                    <label> Selecione seu plano: </label><br>
                    <label for="aulaCheck">R$30 hora</label>
                        <input type="radio" onclick="formqtd(); aulaP();" name="plano" id="aulaCheck"><br>
                    <label for="mesCheck"> Plano Mensal 2 aulas/semana R$280</label>
                        <input type="radio" onclick="formqtd(); aulaP();" name="plano" id="mesCheck">

<button type="button" id="botao1" onclick="aulaP()">Enviar</button>
                </form><br> 

                    <h3>Resposta</h3>
                    <p id="aulaP()"></p>

            </div>

            <div class="conteudo" id="formqtd" style="display: none;">
                <form>
                    <h3>Horas e dias da semana</h3>
                        <label for="hora">Hora:</label>
                            <input type="text" id="hora"><br>
                        <label> Quantos dias na semana? (n°)</label>
                            <input type="text" id="dias">

                            <button type="button" onclick="formqtd(); aulaP();" id="botao2"><b>Enviar</b></button>
                </form>
                        <h3>Resposta</h3>
                        <p id="aulaP()"></p>
            </div>


    </body>
</html>

sorry for formatting I still don’t know how to use stackoverflow properly.

1 answer

Browser other questions tagged javascript html5

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

by Sam • **79,597** points · Answer 1 · 2019-10-29T14:44:40+00:00

Many problems in the code. Do not use () in id’s. Do not repeat an element with the same id - an id must be single page.

Just call the function formqtd() on radios and the function aulaP() in the buttons Send.

The <p id="aulaP"></p>, that you are repeating with the same id, just put it only 1 time after the two Divs, and empty it when calling the function formqtd() with document.getElementById("aulaP").innerHTML = '';.

In function aulaP(), where you want to know which radio was checked, do not take the value of the elements. To know if you are checked, take only the elements, ie instead of:

let pagaula = document.getElementById("aulaCheck").value;
let pagmes = document.getElementById("mesCheck").value;

Seria:

let pagaula = document.getElementById("aulaCheck");
let pagmes = document.getElementById("mesCheck");

And where has:

document.getElementById("aulaP()").innerHTML  = ("O plano aula é" + pagaula + " por hora. Já que você precisará de " + qtdhora + " horas por aula, durante " + qtddias + " na semana, o preço final é: " + pagfinal.toFixed(2));

Would be the value of the variable resposta which will be inserted in the div at the end of the function:

resposta  = "O plano aula é" + pagaula + " por hora. Já que você precisará de " + qtdhora + " horas por aula, durante " + qtddias + " na semana, o preço final é: " + pagfinal.toFixed(2);

And you don’t have to put it in () the variable string.

It’ll be like this:

function formqtd()
{
  
  document.getElementById("aulaP").innerHTML = '';
   if(document.getElementById("aulaCheck").checked)
   {
       document.getElementById("formqtd").style.display="block";
       document.getElementById("botao2").style.display="block";
       document.getElementById("botao1").style.display="none";
   }
   else if (document.getElementById("mesCheck").checked) 
   {
       document.getElementById("formqtd").style.display="none";
       document.getElementById("botao2").style.display="none";
       document.getElementById("botao1").style.display="block";
   }
}

function aulaP(){



   let pagaula = document.getElementById("aulaCheck");
   let pagmes = document.getElementById("mesCheck");
   let qtdhora = Number(document.getElementById("hora").value);
   let qtddias = Number(document.getElementById("dias").value);
   let resposta = "";

   if(pagaula.checked)
   {
       let pagaula = 30;
       let precoaula = (pagaula * qtdhora);
       let pagfinal = precoaula * qtddias;

       resposta  = "O plano aula é" + pagaula + " por hora. Já que você precisará de " + qtdhora + " horas por aula, durante " + qtddias + " na semana, o preço final é: " + pagfinal.toFixed(2);
   }
   else if (pagmes.checked)
   {
       let pagmes = 280;
       let pagfinal = pagmes;

       resposta = "O pagamento final do plano mensal é:" + pagfinal.toFixed(2);
   }
   let respostafinal = resposta;
   document.getElementById("aulaP").innerHTML = respostafinal;
}

<div class="conteudo">
    <h1>Aulas Particulares</h1><br>
    <h2>Aulas JS</h2>
    <h3> R$30 a hora/aula ou plano mensal R$280 </h3>
    <form>
        <label> Selecione seu plano: </label><br>
        <label for="aulaCheck">R$30 hora</label>
            <input type="radio" onclick="formqtd();" name="plano" id="aulaCheck"><br>
        <label for="mesCheck"> Plano Mensal 2 aulas/semana R$280</label>
            <input type="radio" onclick="formqtd();" name="plano" id="mesCheck">

<button type="button" id="botao1" onclick="aulaP()">Enviar</button>
    </form><br> 

        <h3>Resposta</h3>

</div>

<div class="conteudo" id="formqtd" style="display: none;">
    <form>
        <h3>Horas e dias da semana</h3>
            <label for="hora">Hora:</label>
                <input type="text" id="hora"><br>
            <label> Quantos dias na semana? (n°)</label>
                <input type="text" id="dias">

                <button type="button" onclick="aulaP();" id="botao2"><b>Enviar</b></button>
    </form>
            <h3>Resposta</h3>
</div>
<p id="aulaP"></p>