Change values in the html page using javascript

Question

I have this form that is of a box office in html, but I want it to work using javascript, when clicking the button of + or - to change the quantity and change the total value.

I looked it up and saw the tag output I was testing but I could not perform a good implementation with the buttons...

the html code I have is as follows:

<tr class="linha-meio borda-topo">
        <td class="divisao-direita">CRIANÇA (3 - 12 ANOS)</td>
        <td>13,78 €</td>
        <td class="alinhar-direita">
            <button class="botao-quantidade">&#10134;</button>
            <a class="quantidade">0</a>
            <button class="botao-quantidade">&#10133;</button>
        </td>
    </tr>
    <tr class="linha-meio">
        <td class="divisao-direita">ADULTO (13 - 64 ANOS)</td>
        <td>21,38 €</td>
        <td class="alinhar-direita">
            <button class="botao-quantidade">&#10134;</button>
            <a class="quantidade">2</a>
            <button class="botao-quantidade">&#10133;</button>
        </td>
    </tr>
    <tr class="borda-fundo">
        <td class="divisao-direita">SÉNIOR (+65 ANOS)</td>
        <td>15,20 €</td>
        <td class="alinhar-direita">
            <button class="botao-quantidade">&#10134;</button>
            <a class="quantidade">0</a>
            <button class="botao-quantidade">&#10133;</button>
        </td>
    </tr>
    <tr class="nao-mudar-cor-1">
        <td></td>
        <th class="alinhar-direita">Total:</th>
        <td class="alinhar-direita">42.76€ c/iva</td>
    </tr>
</table>

If you can help, I’m new to Java

Answer 1

Hello I will make an example here of how could be the solution, but there are several ways to solve the problem.

In my example I added id in the following elements, you should possibly use id in all elements.

 <a id="qtdcrianca" class="quantidade">0</a>
 <button id="addqtdcrianca" class="botao-quantidade">&#10133;</button>
 <td id="agregadototal" class="alinhar-direita">42.76€ c/iva</td>

Here is the script part.

<script>
   function adicionarValorCrianca() {
     let el = document.getElementById("qtdcrianca")
     let valor = parseInt(el.text)
     valor += 1
     el.text = valor
     atualizarTotal()
   }
   function atualizarTotal() {
     let total = 0
     let el = document.getElementById("qtdcrianca")
     let valor = parseInt(el.text)
     const totalcrianca = 13.78
     total = valor * totalcrianca
     const adulto = 21.38
     let el1 = document.getElementById("qtdadulto")
     let valor1 = parseInt(el1.text)
     total += valor1 * adulto
     console.log(total)
    const totalcstr = document.getElementById("agregadototal").textContent = total.toFixed(2)+'€ c/iva'
   }
   elemento = document.getElementById("addqtdcrianca")
   elemento.addEventListener("click", adicionarValorCrianca); 
</script>

In order to update the value, at the end of the increment method you must call the routine that updates the total value. I updated the html and script.

This would be a simple implementation of your requirements, you can improve much more, this example including creating a shared method to add or decrease values.

I hope I’ve helped.