CSS LOOP em mal funcionamento (ERRO de LOGICA)

Wagner Leandro · 7 de novembro de 2020

É um site onde controla a quantidade de água que você toma durante o dia.
quando chega no loop, ao invés de somar, esta fazendo uma conta muito louca kkk

Quandoo retiro o Number() ele soma crt! mas concatena porque é string

function js() {

            var res = document.querySelector('.res')

            var ml = Number(document.querySelector('.ml').value)

            var meta = document.querySelector('.barra-meta')

            var media_meta = document.querySelector('.media-meta')

            if (ml == "" || ml.length == 0) {

                res.innerHTML = "Ml inválido"

                event.preventDefault()

                return false

            }

            if (ml < 0 || ml.length < 0 || ml == 0 ) {

                res.innerHTML = `ML inválido`

                event.preventDefault()

                return false

            }else{

            for (var rel = Number(0);rel < 2001; rel=rel+ml){          ENQUANDO A QUANTIDADE DE ÁGUA FOR MENOR QUE 2000L, ELE IRIA SOMAR.

                var rel = rel                                                                       

                media_meta.innerHTML = `$`

                document.querySelector(".add_agua").style.display = "none"

                document.querySelector('#home').style.opacity = '1'

                if (rel>249){

                    meta.style.width = "6%"

                }

                if (rel>599){

                    meta.style.width = "13%"

                }

                if (rel>999){

                    meta.style.width = "24%"

                }

                if (rel>1249){

                    meta.style.width = "31%"

                }

                if (rel>1499){

                    meta.style.width = "37%"

                }

                if(rel>1999){

                    meta.style.width = "48%"

                    document.querySelector('#home').style.opacity = '0.2'

                    document.querySelector("#parabens").style.display = "block"

                }

            }



            //media_meta.innerHTML = `$`

        }

    }

DiF · 8 de novembro de 2020

@Wagner Leandro

Já tentou trocar a função number() por parseInt() ?

var ml = parseInt(document.querySelector('.ml').value);

for (var rel = parseInt(0);rel < 2001; rel=rel+ml){

Tem uma diferença entre eles... semanticamente..

exemplo:

parseInt("20px");       // 20


// tipo de conversão
Number("20px");       // NaN

Para operações com valores, use o parseInt

washalbano · 8 de novembro de 2020

Olá!
Se não for somente números inteiros, use parseFloat

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
      * {
          box-sizing: border-box;
      }

      body {
          background-color: #eee;
      }

      main {
          margin: 12px auto;
          max-width: 600px;
          padding: 12px;
          background-color: #fff;
          border-radius: 6px;
          box-shadow: 2px 2px 6px rgba(0, 0, 0, .25);
      }

      main > * {
          border: thin solid #ccc;
          padding: 12px;
          border-radius: 4px;
          margin: 6px 0;
      }

      .barra-meta {
          padding: 12px;
          border-radius: 6px;
          width: 100%;
          transition: all .75s;
          background-color: darkcyan;
          text-align: right;
      }

      input {
          padding: 6px;
      }

      #parabens {
          display: none;
      }
  </style>
</head>
<body>

<main>
  <div class="res"></div>
  <div>
    <label>ML</label>
    <input type="number" class="ml">
  </div>
  <div>
    <label>barra meta</label>
    <div class="barra-meta">100%</div>
  </div>
  <div class="media-meta">media meta</div>
  <div class="add_agua">add agua</div>
  <div id="home">#home</div>
  <div id="parabens">#parabens</div>
</main>
<main>
  <div>
    <label>rel:</label>
    <div class="rel"></div>
  </div>
</main>
<script>

    const mlInput = document.querySelector('.ml'),
        addAgua = document.querySelector(".add_agua"),
        meta = document.querySelector('.barra-meta'),
        res = document.querySelector('.res'),
        media_meta = document.querySelector('.media-meta'),
        relDiv = document.querySelector('.rel'),
        home = document.querySelector('#home');

    console.log(mlInput)

    mlInput.addEventListener('input', js)

    function js() {

        res.innerHTML = '';

        addAgua.style.display = 'block';

        meta.style.width =
            meta.innerHTML =
                porcentagem = '100%';

        var ml = parseFloat(mlInput.value)

        if (ml == "" || ml < 0 || ml.length <= 0 || ml == 0) {

            res.innerHTML = "Ml inválido"

        } else {

            for (var rel = 0; rel < 2001; rel += ml) {
                /*
                ENQUANDO
                A
                QUANTIDADE
                DE
                ÁGUA
                FOR
                MENOR
                QUE
                2000
                L, ELE
                IRIA
                SOMAR.var
                rel = rel
*/
                media_meta.innerHTML = `$`

                relDiv.innerHTML = rel;

                addAgua.style.display = "none"

                home.style.opacity = '1'


                if (rel > 249) {

                    porcentagem = "6%"

                }

                if (rel > 599) {

                    porcentagem = "13%"

                }

                if (rel > 999) {

                    porcentagem = "24%"

                }

                if (rel > 1249) {

                    porcentagem = "31%"

                }

                if (rel > 1499) {
                    porcentagem = "37%"

                }

                if (rel > 1999) {

                    porcentagem = '48%'

                    home.style.opacity = '0.2'

                    document.querySelector("#parabens").style.display = "block"

                }

                meta.style.width =
                    meta.innerHTML = porcentagem

            }


//media_meta.innerHTML = `$`

        }

    }

</script>

</body>
</html>