Что не так с моей формой расчёта стоимости

Здравствуйте.
В кодике прописываю, всё работает.
На юкозе проверяю, работает .
Размещаю на ВордПресс, не работает!
Нет результата почему то.

<style>

input[type="number"] {
background-color: #ffffff;
width: 40%;
padding: 10px;
margin: 10px 0;
}
button {
padding: 10px;
background-color: #1814e3ff;
color: white;
border: solid;
cursor: pointer;
}
button:hover {
background-color: #5352a1ff;
}
</style>
</head>
<body>

<h2>Рассчитать стоимость обработки от клещей</h2>

<div>Расчет стоимости учитывает скидки при заказе от 20 соток</div><br>

<form id="costCalculator" style=" border: 4px ridge #141266; background-color: #bbc4c0; width: 40%" >
<label for="area">Площадь в сотках:</label><br>
<input type="number" id="area" name="area" min="0" step="0.01" required><br>
<button type="button" onclick="calculateCost()">Рассчитать стоимость</button>
</form>

<h3 id="result"></h3>

<script>
function calculateCost() {
const area = document.getElementById('area').value;
const costPerAre = 500; // Стоимость обработки за сотку
let totalCost = area * costPerAre;

// Применение скидки 20% для площади от 20 соток
if (area >= 20) {
totalCost *= 0.8; // Применяем скидку 20%
}

document.getElementById('result').innerText = `Стоимость обработки: ${totalCost.toFixed(2)} рублей`;
}
</script>

Комментарии