<!DOCTYPE html>
<html>
<head>
 
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}
 
/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 0 4px;
}
 
/* Responsive layout - makes the two columns stack on top of each other */
@media (max-width: 767px) {
  .column {
    flex: 100%;
    padding: 0;
  }
}
</style>
</head>
<body>
 
<form onsubmit="calculate(); return false;">
    <div class="column" style="background-color:#f2f2f2;">
        <h3>Başabaş Noktası Hesapla</h3>
        <label for="fixed_expenses">Fixed Expenses:</label><br>
        <input type="number" id="fixed_expenses" name="fixed_expenses"><br>
        <label for="unit_sales_price">Unit Sales Price:</label><br>
        <input type="number" id="unit_sales_price" name="unit_sales_price"><br>
        <label for="variable_cost">Variable Cost:</label><br>
        <input type="number" id="variable_cost" name="variable_cost"><br><br>
        <label for="result">Result:</label><br>
        <output id="result"></output><br><br>
        <button type="submit">Calculate</button>
    </div>
</form>

<script>
    function calculate() {
        var fixedExpenses = parseFloat(document.getElementById('fixed_expenses').value);
        var unitSalesPrice = parseFloat(document.getElementById('unit_sales_price').value);
        var variableCost = parseFloat(document.getElementById('variable_cost').value);
        
        if (isNaN(fixedExpenses) || isNaN(unitSalesPrice) || isNaN(variableCost)) {
            document.getElementById('result').innerHTML = "Please enter valid numbers.";
        } else {
            var result = fixedExpenses / (unitSalesPrice - variableCost);
            document.getElementById('result').innerHTML = result;
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
        calculate();
    });
</script>

 
    </div>
 
</body>
</html>
şu şekilde deneyin hocam.