价格格式和用户输入值以更改滑块

时间:2017-10-17 18:07:26

标签: javascript jquery input formatting slider

我需要在哪里设置.toFixed(2)方法才能为我的范围滑块输出设置固定格式? 1.9 - > 1.90 2 - > 2.00

此外,是否可以有一个输入字段,用户将其价格(格式(GER):0,00€)并将其转换为0.00€,并根据用户输入更改slidevalue?

非常感谢!



function outputUpdate(vol) {
	document.querySelector('#volume').value = vol;
}

function outputUpdate2(vol2) {
	document.querySelector('#volume2').value = vol2;
}


  function TKPJ(){
  		var Field1 = document.getElementById('Field1').value;
  		var Field2 = document.getElementById('Field2').value;
  		var Field3 = document.getElementById('Field3').value;
  		var Format = document.getElementById('Format').value;
  		var Slider1 = document.getElementById('Slider1').value;
  		var Slider2 = document.getElementById('Slider2').value;
			var vol = document.getElementById('volume').value;
			var vol2 = document.getElementById('volume2').value;
  		var Total = ((Field1*Field2*Field3*Format*vol*vol2)/100).toFixed(2);

  		Total = Total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  		document.getElementById('Total').innerHTML = "Cost per year = "+ Total +" €";





  }

 <p>Field1</p>
        			          <input type="number" name="Field1" id="Field1" onkeyup="TKPJ()">
        			       </div>

                			  <p>Field2</p>
                			  <input  type="number" name="Field2" id="Field2" onkeyup="TKPJ()">

                			  <p>Field3</p>
                			  <input type="number" name="Field3" id="Field3" onkeyup="TKPJ()">

                			  <select name="Format" id="Format" size="1" type="number" onchange="TKPJ()">
                					<option value="1">Year</option>
                					<option value="12">Month</option>
                					<option value="365">Day</option>
                				</select>

                        <p>Slider1</p>
                        <input id="Slider1" type="range" min="0.20" max="5" step="0.01" value="1.50" oninput="outputUpdate(this.value)">
                        
        <output for="Preisliter" id="volume"> 1.50 </output>
                        <br>

                        <p>Slider2</p>
                        <input id="Slider2" type="range" min="0.1" max="25" step="0.1" value="12.50" oninput="outputUpdate2(this.value)">
                        
  <output for="Slider2" id="volume2"> 12.5 </output>
  
                          <h3 id="Total">Cost per year = 0,00€</h3>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

在致电.toFixed(2)之前,您必须解析编号为字符串的数字。解析后,您有数字对象,可以正确调用.toFixed()方法

function outputUpdate2(vol2) {
    document.querySelector('#volume2').value = parseFloat(vol2).toFixed(2);
}