I'm currently working on a basic calculator project and I've hit a roadblock. I need to hide certain elements based on conditions. The code snippet with explanations is provided below.
function calculateArea() {
var length = document.getElementById("length").value;
var width = document.getElementById("width").value;
var area = length * width;
var rate = 7.8;
var total = area * rate;
document.getElementById("result").innerHTML = total;
}
$('#width').keypress(function(event) {
if (((event.which != 46 || (event.which == 46 && $(this).val() == '')) ||
$(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
}).on('paste', function(event) {
event.preventDefault();
});
$('#length').keypress(function(event) {
if (((event.which != 46 || (event.which == 46 && $(this).val() == '')) ||
$(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
}).on('paste', function(event) {
event.preventDefault();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<span>Length:</span>
<input class="calculation-field" type="text" id="length" name="length" placeholder="e.g. 120">
</div>
<div>
<span>Width:</span>
<input class="calculation-field" type="text" id="width" name="width" placeholder="e.g. 2.8">
</div>
<button onclick="calculateArea()">Calculate</button>
<!--- Display the following elements only if the area value (with id=wynik) is greater than 0 and is filled --->
<p id="condition">Result:</p>
<p type="text" id="result"></p>As you can see, I need to conditionally show these two "p" elements based on the id=wynik value being filled and greater than 0. How can I achieve this?