При смене max и min у input type="range" перестают суммироваться суммы,помогите пожалуйста
var basePrice = 28900;
var basePrice_2 = 0;
var basePrice_3 = 0;
var bedroomCostFactor = [0, 10, 35, 70, 95, 120];
var bathroomCostFactor = [0, 25, 50, 75, 100, 125];
document.querySelector('#bed_service').addEventListener('change', function(evt) {
var value = evt.target.value;
// value will be a string. Coercing to a number using +value
var bedCost = parseInt(getBedroomCost(+value), 10).toFixed(2);
document.querySelector('#bed_display').innerHTML = value;
document.querySelector('#bed_cost').innerHTML = bedCost;
getTotalCost();
});
document.querySelector('#bath_service').addEventListener('change', function(evt) {
var value = evt.target.value;
// value will be a string. Coercing to a number using +value
var bathCost = parseInt(getBathroomCost(+value), 10).toFixed(2);
document.querySelector('#bath_display').innerHTML = value;
document.querySelector('#bath_cost').innerHTML = bathCost;
getTotalCost();
})
function getTotalCost() {
var bedCost = parseInt(document.querySelector('#bed_cost').innerHTML || 0, 10);
var bathCost = parseInt(document.querySelector('#bath_cost').innerHTML || 0, 10);
document.querySelector('#prise_chendge').innerHTML = (basePrice + bathCost + bedCost).toFixed(2);
}
function getBedroomCost(val) {
return basePrice_2 + bedroomCostFactor[val - 1];
}
function getBathroomCost(val) {
return basePrice_3 + bathroomCostFactor[val - 1];
}
<div class="prise">
Цена:<span id="prise_chendge">28 900</span> руб.
</div>
<div class="form__fields">
<div class="form_text_fields">
<span class="form_label">Ширина дивана </span><span class="choice_display" id="bed_display">100</span> м2 </div>
<div class="form_text_fields none">
<span class="form_label">Cost: </span><span class="choice_display" id="bed_cost">0</span> </div>
<div class="form_input_field">
<input type="range" min="1" max="6" value="1" class="slider" id="bed_service">
</div>
</div>
<div class="form__fields">
<div class="form_text_fields">
<span class="form_label">Длинна дивана: </span><span class="choice_display" id="bath_display">100</span>м2
</div>
<div class="form_text_fields none">
<span class="form_label">Cost: </span><span class="choice_display" id="bath_cost">0</span> </div>
<div class="form_input_field">
<input type="range" min="1" max="6" value="1" class="slider" id="bath_service">
</div>
</div>
Ответы (1 шт):
Автор решения: Pilaton
→ Ссылка
Все работает.
Если я правильно понял, у вас выводился NaN вместо цифры Cost, когда вы меняете значение в строке <input type="range" min="1" max="6", например прописывая max="7" вместо max="6".
Если проблема у вас действительно в этом была, то заключалась она в отсутствии "седьмой" суммы Cost в массивах:
var bedroomCostFactor = [0, 10, 35, 70, 95, 120, 500];
var bathroomCostFactor = [0, 25, 50, 75, 100, 125, 1000];
var basePrice = 28900;
var basePrice_2 = 0;
var basePrice_3 = 0;
var bedroomCostFactor = [0, 10, 35, 70, 95, 120, 500];
var bathroomCostFactor = [0, 25, 50, 75, 100, 125, 1000];
document.querySelector('#bed_service').addEventListener('change', function(evt) {
var value = evt.target.value;
// value will be a string. Coercing to a number using +value
var bedCost = parseInt(getBedroomCost(+value), 10).toFixed(2);
document.querySelector('#bed_display').innerHTML = value;
document.querySelector('#bed_cost').innerHTML = bedCost;
getTotalCost();
});
document.querySelector('#bath_service').addEventListener('change', function(evt) {
var value = evt.target.value;
// value will be a string. Coercing to a number using +value
var bathCost = parseInt(getBathroomCost(+value), 10).toFixed(2);
document.querySelector('#bath_display').innerHTML = value;
document.querySelector('#bath_cost').innerHTML = bathCost;
getTotalCost();
})
function getTotalCost() {
var bedCost = parseInt(document.querySelector('#bed_cost').innerHTML || 0, 10);
var bathCost = parseInt(document.querySelector('#bath_cost').innerHTML || 0, 10);
document.querySelector('#prise_chendge').innerHTML = (basePrice + bathCost + bedCost).toFixed(2);
}
function getBedroomCost(val) {
return basePrice_2 + bedroomCostFactor[val - 1];
}
function getBathroomCost(val) {
return basePrice_3 + bathroomCostFactor[val - 1];
}
<div class="prise">
Цена:<span id="prise_chendge">28 900</span> руб.
</div>
<div class="form__fields">
<div class="form_text_fields">
<span class="form_label">Ширина дивана </span><span class="choice_display" id="bed_display">100</span> м2 </div>
<div class="form_text_fields none">
<span class="form_label">Cost: </span><span class="choice_display" id="bed_cost">0</span> </div>
<div class="form_input_field">
<input type="range" min="1" max="7" value="1" class="slider" id="bed_service">
</div>
</div>
<div class="form__fields">
<div class="form_text_fields">
<span class="form_label">Длинна дивана: </span><span class="choice_display" id="bath_display">100</span>м2
</div>
<div class="form_text_fields none">
<span class="form_label">Cost: </span><span class="choice_display" id="bath_cost">0</span> </div>
<div class="form_input_field">
<input type="range" min="1" max="7" value="1" class="slider" id="bath_service">
</div>
</div>