I have an worksheet with values that need to be displayed in a webpage depending on the user’s input.
This is a pricing page in WordPress with five different currencies. A user will input a value (amount of rooms in their hotel) and the return should be four different pricing options for the four different packages we offer.
The problem is, there is no arithmetic pattern between any of these values. Every single one of them for every different currency is unique.
Above is the pricing page.
The pricing on the page is currently incorrect as I am using a formula instead of the actual values.
# of rooms:
<script type="text/javascript" defer>
document.querySelector(".switch-button-checkbox").addEventListener("click",function(){
var entryText = document.querySelector(".entry-column .elementor-price-table__integer-part");
var starterText = document.querySelector(".starter-column .elementor-price-table__integer-part");
var premiumText = document.querySelector(".premium-column .elementor-price-table__integer-part");
var enterpriseText = document.querySelector(".enterprise-column .elementor-price-table__integer-part");
if(document.querySelector(".switch-button-checkbox").checked == true){
//Annual
if(input.value<=18){
//ENTRY PRICE
entryText.innerHTML = Math.ceil(18*111.06);
//STARTER PRICE
starterText.innerHTML = Math.ceil(18*142.06);
//PREMIUM PRICE
premiumText.innerHTML = Math.ceil(18*208.28);
//ENTERPRISE PRICE
enterpriseText.innerHTML = Math.ceil(18*292.94);
}else if(input.value>18){
//ENTRY PRICE
entryText.innerHTML = Math.ceil(input.value*112.76);
//STARTER PRICE
starterText.innerHTML = Math.ceil(input.value*141);
//PREMIUM PRICE
premiumText.innerHTML = Math.ceil(input.value*206.85);
//ENTERPRISE PRICE
enterpriseText.innerHTML = Math.ceil(input.value*291.55);
}
}else{
//Monthly
if(input.value<=18){
//ENTRY PRICE
entryText.innerHTML = Math.ceil(18*133.33);
//STARTER PRICE
starterText.innerHTML = Math.ceil(18*170.00);
//PREMIUM PRICE
premiumText.innerHTML = Math.ceil(18*250.00);
//ENTERPRISE PRICE
enterpriseText.innerHTML = Math.ceil(18*351.67);
}else if(input.value>18){
//ENTRY PRICE
entryText.innerHTML = Math.ceil(input.value*135.50);
//STARTER PRICE
starterText.innerHTML = Math.ceil(input.value*169.37);
//PREMIUM PRICE
premiumText.innerHTML = Math.ceil(input.value*248.3);
//ENTERPRISE PRICE
enterpriseText.innerHTML = Math.ceil(input.value*350);
}
}
});
const input = document.querySelector(".rooms-input");
input.addEventListener('change', priceFunction);
input.addEventListener('keyup', priceFunction);
function priceFunction(){
var entry = document.querySelector(".entry-column .elementor-price-table__integer-part");
var starter = document.querySelector(".starter-column .elementor-price-table__integer-part");
var premium = document.querySelector(".premium-column .elementor-price-table__integer-part");
var enterprise = document.querySelector(".enterprise-column .elementor-price-table__integer-part");
var inputValue = input.value;
if(inputValue>999){
input.value = 999;
}
if(document.querySelector(".switch-button-checkbox").checked == true){
//Annual
if(inputValue<=18){
//ENTRY PRICE
entry.innerHTML = Math.ceil(18*111.06);
//STARTER PRICE
starter.innerHTML = Math.ceil(18*142.06);
//PREMIUM PRICE
premium.innerHTML = Math.ceil(18*208.28);
//ENTERPRISE PRICE
enterprise.innerHTML = Math.ceil(18*292.94);
}else if(inputValue>18){
//ENTRY PRICE
entry.innerHTML = Math.ceil(inputValue*112.76);
//STARTER PRICE
starter.innerHTML = Math.ceil(inputValue*141);
//PREMIUM PRICE
premium.innerHTML = Math.ceil(inputValue*206.85);
//ENTERPRISE PRICE
enterprise.innerHTML = Math.ceil(inputValue*291.55);
}
}else{
//Monthly
if(inputValue<=18){
//ENTRY PRICE
entry.innerHTML = Math.ceil(18*133.33);
//STARTER PRICE
starter.innerHTML = Math.ceil(18*170.00);
//PREMIUM PRICE
premium.innerHTML = Math.ceil(18*250.00);
//ENTERPRISE PRICE
enterprise.innerHTML = Math.ceil(18*351.67);
}else if(inputValue>18){
//ENTRY PRICE
entry.innerHTML = Math.ceil(inputValue*135.50);
//STARTER PRICE
starter.innerHTML = Math.ceil(inputValue*169.37);
//PREMIUM PRICE
premium.innerHTML = Math.ceil(inputValue*248.3);
//ENTERPRISE PRICE
enterprise.innerHTML = Math.ceil(inputValue*350);
}
}
}
</script>