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">×</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>
Add the code to the question so we can help you.
– Felipe Duarte
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>
utilizedocument.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
Only html was missing, but you can see that the behavior is due to insertAdjacentHTML()
– Leandro Angelo