如何从范围滑块添加两个值以形成单个值

Question

我正在研究一些代码，将两个值加在一起形成一个完整的值。我试图从卧室和浴室中获取值以添加到单个值中。每个值都是一个数值，但我不知道如何组合它们。任何帮助将不胜感激。

这是JS小提琴。我不确定为什么它不起作用。

https://jsfiddle.net/n48kvejy/22/

var basePrice = 85.00;
function sliderChange(val) {
document.getElementById('bed_display').innerHTML = val;
}
function sliderChange2(val) {
document.getElementById('bath_display').innerHTML = val;
}
function changePrice(val) {
if (val == 1) {
document.getElementById('price').innerHTML = basePrice;
}
if (val == 2) {
document.getElementById('price').innerHTML = basePrice + 10;
}
if (val == 3) {
document.getElementById('price').innerHTML = basePrice + 35;
}
if (val == 4) {
document.getElementById('price').innerHTML = basePrice + 70;
}
if (val == 5) {
document.getElementById('price').innerHTML = basePrice + 95;
}
if (val == 6) {
document.getElementById('price').innerHTML = basePrice + 120;
}
}
function changePrice2(val) {
if (val == 1) {
document.getElementById('price').innerHTML = basePrice;
}
if (val == 2) {
document.getElementById('price').innerHTML = basePrice + 25;
}
if (val == 3) {
document.getElementById('price').innerHTML = basePrice + 50;
}
if (val == 4) {
document.getElementById('price').innerHTML = basePrice + 75;
}
if (val == 5) {
document.getElementById('price').innerHTML = basePrice + 100;
}
if (val == 6) {
document.getElementById('price').innerHTML = basePrice + 125;
}
}

我希望代码做类似的事情：http://jsfiddle.net/humbleRumble/uL23spL1/1/

谢谢！

Answer 1

最好在脚本中绑定事件，而不是以内联方式绑定事件。

• 使用+运算符添加值

这样做的一个基本方法是

var basePrice = 85.00;
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('#price').innerHTML = (bathCost + bedCost).toFixed(2);
}
function getBedroomCost(val) {
	return basePrice + bedroomCostFactor[val - 1];
}
function getBathroomCost(val) {
	return basePrice + bathroomCostFactor[val - 1];
}

<div class="form__fields">
<div class="form_text_fields">
<span class="form_label">Bedrooms: </span><span class="choice_display" id="bed_display">1</span> </div>
<div class="form_text_fields">
<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">Bathrooms: </span><span class="choice_display" id="bath_display">1</span>
</div>
<div class="form_text_fields">
<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>
<div id="price">
</div>