javascript - 如何从范围滑块添加两个值以形成单个值
问题描述
我正在编写一些代码,将两个值相加以形成一个完整的值。我想要得到的是 Bedrooms 和 Bathrooms 中的值添加到单个值中。每个值都是一个数值,但我不知道如何组合它们。任何帮助将不胜感激。
这是 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/
谢谢!
解决方案
最好在脚本中绑定事件而不是内联绑定。
- 使用
+
运算符添加值
这样做的一种基本方法是
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>
推荐阅读
- c# - 如何在 EFCore 中使用 EF .SqlQuery 表达式?
- swiftui-list - 在 SwiftUI 中使用列表时如何解决错误“Initializer 'init(_:id:rowContent:)' 要求 '(String, String)' 符合 'Hashable'”
- java - 有没有一种方法可以循环检查 Frame.state 的状态,而无需循环检查中的代码?
- c# - 无法从控件中读取“浮点”类型的值
- javascript - 如何使它在AngularJs中的单个标头上工作
- docker - 错误:无法在 CouchDB Docker 容器中解析 http://any:5984/verifytestdb/
- javascript - 无法在 DOM 中选择元素
- c++ - 将值更改为 C++ 的数组并保存文件
- c - 传递给 pthread 函数调用后访问结构成员
- java - 是否可以为这两个查询设计一个 Google Datastore 索引?