Question

我正在研究一些将两个值加在一起构成一个完整值的代码。我想要得到的是将“卧室和浴室”中的值添加到单个值中。每个值都是一个数值，但是我不知道如何将它们组合起来。任何帮助将不胜感激。

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

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>

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

1 个答案: