Label concatenating subsequent results, how to clear the previous result?

Question

Label concatenating subsequent results, how to clear the previous result?

Asked 6 years, 9 months ago

Viewed 103 times

2

Explanation

I have two label elements that receive the results of an account made within the code (lamp expense calculator), when I click to calculate, it calculates and inserts the result of the calculation in the label, when I click to calculate again, it concatenates the previous results with the current result.

How to clean the first result so that the subsequent results are not concatenated infinitely?

Code

function calcularValores() {
var horas = document.getElementById('inputhoras').value;
if (horas >0 && horas <= 24){
    var kw = document.getElementById('inputkw').value;
    var incandescente;
    var fluorescente;
    var e = document.getElementById('lampadaSel');
    var itemSelecionado = e.options[e.selectedIndex].value;
    var qtde = document.getElementById('qtdelamp').value;
    var label = document.getElementById('lblResultado');
    var labelinc = document.getElementById('lblin');
    var result;
    result = (horas * kw);
    incandescente = (horas *kw);
  `insira o código aqui`  switch (itemSelecionado) {
        case '1':
            incandescente = (0.050 * result) ;
            result = 0.010 * result;
            //incandescente = (0.050 * result) * 30;
            
        break;
        case '2':
            result = 0.040 * result;
        break;
        case '3':
            result = 0.060 * result;
        break;
        case '4':
            result = 0.036 * result;
        break;
        case '5':
            result = 0.048 * result;
        break;
        case '6':
            result = 0.006 * result;
        break;
        case '7':
            result = 0.010 * result;
        break;
        case '8':
            result = 0.015 * result;
        break;
        case '9':
            result = 0.014 * result;
        break;
        case '10':
            result = 0.009 * result;
        break;
        case '11':
            result = 0.018 * result;
        break;
        case '12':
            result = 0.045 * result;
        break;
        default:
        break;
    }
     result = (result * 30) * qtde;
     incandescente = (incandescente *30)* qtde;
    label.insertAdjacentHTML('beforeend', result.toFixed(2));
    labelinc.insertAdjacentHTML('beforeend',incandescente.toFixed(2));
    document.getElementById('inputhoras').value='';
    labelinc.value("");
    label.value( "");
    
    

}else{
    alert("Digite uma quantidade de horas valida!");
    label.insertAdjacentHTML('');
    }
}

HTML

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Felipe Leme E Gabriel Silva">
    <link rel="stylesheet" href="style.css">
    <title>Modal Calculadora</title>
</head>

<body>
    <button id="modalBtn" class="button">Calculadora</button>

    <div id="simpleModal" class="modal">
        <div class="modal-content">
            <span class="closeBtn">&times;</span>
            <h2>Calcule</h2>
            <div class="row">
                <form class="col s12">
                    <label for="inputhoras">Quantas Horas a lâmpada ficara ligada?</label>
                    <input type="number" placeholder="horas" id="inputhoras" class="active">
                    <p></p>
                    <label for="inputkw">Quanto custa o KW/H na sua região?</label>
                    <input type="number" placeholder="kw" id="inputkw" class="active">
                    <p></p>                   
                    <label for="inputkw">Qual a quantidade lâmpadas você deseja?</label>                  
                    <input type="number" placeholder="Quantidade de Lâmpadas" id="qtdelamp" class="active">
                    <p></p>  
                    <div class="input-field col s12">
                        <label>Tipo de lâmpada</label>
                        <select id="lampadaSel">
                            <option value="" disabled selected>Selecione</option>
                            <option value="1">Lâmpada Bulbo 10W</option>
                            <option value="2">Lâmpada Bulbo 40W</option>
                            <option value="3">Lâmpada Bulbo 60W</option>
                            <option value="4">Lâmpada Corn Led 36W</option>
                            <option value="5">Lâmpada Corn Led 48W</option>
                            <option value="6">Lâmpada Par 30 6W</option>
                            <option value="7">Lâmpada Par 30 10W Dimerizável</option>
                            <option value="8">Lâmpada Par 38 15W</option>
                            <option value="9">Lâmpada Par 38 14W</option>                                              
                            <option value="10">Lâmpada Tubular 9W </option>
                            <option value="11">Lâmpada Tubular 18W</option>
                            <option value="12">Lâmpada Tubular 45W</option>          
                        </select>
                    </div>
                    <h3>Led R$: <span id="lblResultado"></span></h3>
                    <h3>Incandescente R$ <span id="lblin"></span></h3>
                    <input type="button" id="btnCalcular" class="button" value="Calcular">
                    
                </form>
            </div>
        </div>
    </div>

    <script src="app.js"></script>
</body>

</html>

1

Add the code to the question so we can help you.

– Felipe Duarte

2017/12/18 at 13:21
somewhere in your code will have a .append() or a .innerHTML = ?, use the selector that is using this method and clean the element before inserting, for example if the div that receives the results is <div id=resultados></div> utilize document.getElementById('resultados').innerHTML = '';. But the ideal would be to post your code so we can help you more easily. As @Felipeduarte said above.

– Paulo Roberto Rosa

2017/12/18 at 13:31
Only html was missing, but you can see that the behavior is due to insertAdjacentHTML()

– Leandro Angelo

2017/12/18 at 13:50

1 answer

Browser other questions tagged javascript html string

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

by Sam • **79,597** points · Answer 1 · 2017-12-18T13:56:45+00:00

Your code has errors. For example, these syntaxes are not valid:

labelinc.value("");
label.value( "");

The correct would be, if the elements are div:

labelinc.innerHTML = "";
label.innerHTML = "";

or if they are inputs:

labelinc.value = "";
label.value = "";

Another thing is in the else:

label.insertAdjacentHTML('');

In addition to the variable label does not exist, the syntax is wrong.

To clear the result of the calculations, the correct is to put:

labelinc.innerHTML = "";
label.innerHTML = "";

Before sending the result:

labelinc.innerHTML = "";
label.innerHTML = "";

result = (result * 30) * qtde;
incandescente = (incandescente *30)* qtde;
label.insertAdjacentHTML('beforeend', result.toFixed(2));
labelinc.insertAdjacentHTML('beforeend',incandescente.toFixed(2));
document.getElementById('inputhoras').value='';

And in the else, delete the result as you wish:

document.getElementById('lblin').innerHTML = "";

The whole code would look like this:

function calcularValores() {
var horas = document.getElementById('inputhoras').value;
if (horas >0 && horas <= 24){
    var kw = document.getElementById('inputkw').value;
    var incandescente;
    var fluorescente;
    var e = document.getElementById('lampadaSel');
    var itemSelecionado = e.options[e.selectedIndex].value;
    var qtde = document.getElementById('qtdelamp').value;
    var label = document.getElementById('lblResultado');
    var labelinc = document.getElementById('lblin');
    var result;
    result = (horas * kw);
    incandescente = (horas *kw);
  //insira o código aqui
    switch (itemSelecionado) {
        case '1':
            incandescente = (0.050 * result) ;
            result = 0.010 * result;
            //incandescente = (0.050 * result) * 30;

        break;
        case '2':
            result = 0.040 * result;
        break;
        case '3':
            result = 0.060 * result;
        break;
        case '4':
            result = 0.036 * result;
        break;
        case '5':
            result = 0.048 * result;
        break;
        case '6':
            result = 0.006 * result;
        break;
        case '7':
            result = 0.010 * result;
        break;
        case '8':
            result = 0.015 * result;
        break;
        case '9':
            result = 0.014 * result;
        break;
        case '10':
            result = 0.009 * result;
        break;
        case '11':
            result = 0.018 * result;
        break;
        case '12':
            result = 0.045 * result;
        break;
        default:
        break;
    }

   labelinc.innerHTML = "";
   label.innerHTML = "";

   result = (result * 30) * qtde;
   incandescente = (incandescente *30)* qtde;
   label.insertAdjacentHTML('beforeend', result.toFixed(2));
   labelinc.insertAdjacentHTML('beforeend',incandescente.toFixed(2));
   document.getElementById('inputhoras').value='';

}else{
    alert("Digite uma quantidade de horas valida!");
    document.getElementById('lblin').innerHTML = "";
    }
}