Home / Questions / 205576
Accepted
APRECode
Asked: 2020-10-18 13:33:32 +0800 CST 2020-10-18 13:33:32 +0800 CST

Display the product result of 2 html tags in a div tag

  • 772

Please, your support to be able to display the product of the result of two divs in one div automatically, without pressing a button; when we increment or decrement the values ​​in these 2 divs, the result should be automatically displayed in the new div. My code:

<html>
<head>
<style>
        .d-flex{display:flex;justify-content:center;flex-direction:row;}
        .d-flex button{width:40px;height:40px; border-radius:8px 8px 8px 8px;margin-top:16px;}
        .d-flex p{font-size:12px;margin-top:0;margin-bottom:0;}
        .demo, .demo2, .montone, .montotw{border:1px solid #000000;border-radius:8px 8px 8px 8px;width:100px;height:40px;display:flex;justify-content: center;align-items: center;}
</style>

    <script>
        var a = 500;
        function incremento(){

            a = a + 100;

            if (a<1200) {
            document.getElementById('demo').innerHTML = a;
            }else{
                alert("llegaste al maximo "+a);
            }
        }

        function decremento(){
            a = a - 100;

            if (a>400) {
            document.getElementById('demo').innerHTML = a;
            }else{
                alert("llegaste al minimo "+a);
            }
        }

        var b = 1;
        function incremento2(){

            b = b + 1;

            if (b<=17) {
            document.getElementById('demo2').innerHTML = b;
            }else{
                alert("Maximo de cuotas: 17");
            }
        }
        function decremento2(){

            b = b - 1;

            if (b>0) {
                document.getElementById('demo2').innerHTML = b;
            }else{
                alert("Minima cuota: 1")
            }
        }
    </script>
</head>
    <body>

    <div class="d-flex">
<!-- cantidades --> 
        <div class="d-flex">
            <button type="button" onclick="incremento()">+</button>
             <div style="flex-direction:column;">
                  <p>¿Cuánto Necesitas?</p> 
                  <div class="demo" id="demo">500</div> 
             </div>
            <button type="button" onclick="decremento()">-</button>             
        </div>  

        <div class="d-flex">
            <button type="button" onclick="incremento2()">+</button>
            <div style="flex-direction:column;">
               <p style="font-size:12px;margin-top:0;margin-bottom:0;">¿Cuántas Cuotas?</p>
               <div class="demo2" id="demo2">1</div>
            </div>
            <button type="button" onclick="decremento2()">-</button>
        </div>
<!-- cuotas -->
        <div style="flex-direction: column;">
            <p style="font-size:12px;margin-top:0;margin-bottom:0;">Cuota Minima</p>
            <div class="montone" id="montone">1</div>
        </div>


        <div style="flex-direction: column;">
            <p style="font-size:12px;margin-top:0;margin-bottom:0;">Cuota Maxima</p>
            <div class="montotw" id="montotw">1</div>
        </div>
    </div>
    </body>
</html>
javascript

1 Answers

  1. Best Answer

    It's very simple, it would look like this:

    <html>
<head>
<style>
        .d-flex{display:flex;justify-content:center;flex-direction:row;}
        .d-flex button{width:40px;height:40px; border-radius:8px 8px 8px 8px;margin-top:16px;}
        .d-flex p{font-size:12px;margin-top:0;margin-bottom:0;}
        .demo, .demo2, .montone, .montotw{border:1px solid #000000;border-radius:8px 8px 8px 8px;width:100px;height:40px;display:flex;justify-content: center;align-items: center;}
</style>

    <script>
        var a = 500;
        var b = 1;
        function incremento(){

            a = a + 100;

            if (a<1200) {
            document.getElementById('demo').innerHTML = a;
            }else{
                alert("llegaste al maximo "+a);
            }
            document.getElementById('montone').innerHTML = a * b;
        }

        function decremento(){
            a = a - 100;

            if (a>400) {
            document.getElementById('demo').innerHTML = a;
            }else{
                alert("llegaste al minimo "+a);
            }
            document.getElementById('montone').innerHTML = a * b;
        }
        
        function incremento2(){

            b = b + 1;

            if (b<=17) {
            document.getElementById('demo2').innerHTML = b;
            }else{
                alert("Maximo de cuotas: 17");
            }
            document.getElementById('montone').innerHTML = a * b;
        }
        function decremento2(){

            b = b - 1;

            if (b>0) {
                document.getElementById('demo2').innerHTML = b;
            }else{
                alert("Minima cuota: 1")
            }
            document.getElementById('montone').innerHTML = a * b;
        }
    </script>
</head>
    <body>

    <div class="d-flex">
<!-- cantidades --> 
        <div class="d-flex">
            <button type="button" onclick="incremento()">+</button>
             <div style="flex-direction:column;">
                  <p>¿Cuánto Necesitas?</p> 
                  <div class="demo" id="demo">500</div> 
             </div>
            <button type="button" onclick="decremento()">-</button>             
        </div>  

        <div class="d-flex">
            <button type="button" onclick="incremento2()">+</button>
            <div style="flex-direction:column;">
               <p style="font-size:12px;margin-top:0;margin-bottom:0;">¿Cuántas Cuotas?</p>
               <div class="demo2" id="demo2">1</div>
            </div>
            <button type="button" onclick="decremento2()">-</button>
        </div>
<!-- cuotas -->
        <div style="flex-direction: column;">
            <p style="font-size:12px;margin-top:0;margin-bottom:0;">Cuota Minima</p>
            <div class="montone" id="montone">1</div>
        </div>


        <div style="flex-direction: column;">
            <p style="font-size:12px;margin-top:0;margin-bottom:0;">Cuota Maxima</p>
            <div class="montotw" id="montotw">1</div>
        </div>
    </div>
    </body>
</html>

    • 0