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

Question

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

Navigation

#1 by (3 votes)

2

Explanation

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

How do I clear the first result so that subsequent results are not infinitely concatenated?

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>

javascript html string

asked by anonymous 18.12.2017 / 14:20

1 answer

Task List Help with LINQ, query in .Net

score 3 · Answer 1

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 else :

label.insertAdjacentHTML('');

Besides the label variable does not exist, the syntax is wrong.

To clear the result of the calculations, the correct one is to place:

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 else , delete the result as you wish:

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

The complete code looks 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 = "";
    }
}