当滑块移动时,计算并显示总数。

问题描述 投票:0回答:1

我想计算并显示三个游侠滑块的结果。我试图显示的公式是。

每年行驶的公里数 * 平均公里数100L 燃油价格。

我已经让滑块显示了每个单独的值,但我不知道如何显示计算。

查看代码笔

<div>
  <p>KM Driven per Year</p>
  <p id="myAvgKM"></p>
  <input type="range" min="0" max="300000" value="80000" step="1000" class="slider" id="kmdriven">

  <p>On average, my truck gets around:</p>
    <div class="response-container">
      <p id="myAvgKPL"></p>
      <p>L/100KM</p>
    </div>
  <input type="range" min="4" max="60" value="40" id="avgkm">

  <p>Diesel prices are usually:</p>
  <p id="price"></p>
  <input type="range" min="0.000" max="3.000" value="1.308" step=".001" id="priceValue">
</div>

<div>
  <p>In the first year alone, our services would save you:</p>
  <p id="savings"></p>
</div>

function calculate () {
// Display KM Driven Slider
var kmPerYear = document.getElementById("kmdriven")
var kmOutput = document.getElementById("myAvgKM")
kmOutput.innerHTML = kmPerYear.value;

kmPerYear.oninput = function() {
  kmOutput.innerHTML = this.value;
}

// Display Avg Mileage
var avgKM = document.getElementById("avgkm")
var avgKMOutput = document.getElementById("myAvgKPL")
avgKMOutput.innerHTML = avgKM.value;

avgKM.oninput = function() {
  avgKMOutput.innerHTML = this.value;
}

//Display Avg Price
var avgPrice = document.getElementById("priceValue")
var priceOutput = document.getElementById("price")
priceOutput.innerHTML = avgPrice.value;

avgPrice.oninput = function () {
  priceOutput.innerHTML = this.value;
}

// The Math!


  document.getElementById("savings").innerHTML = "$ ";

}
javascript
1个回答
1
投票

你需要映射你的功能 onchange 事件为

<input onchange="calculate()" type="range" min="0" max="300000" value="80000" step="1000" class="slider" id="kmdriven">

去掉oninput,因为你的滑块不能处理。oninput 改为 onchange

加公式计算总节余

var total = (kmPerYear.value / 100) * (avgKM.value * 1.2) * avgPrice.value;

document.getElementById("savings").innerHTML = `$ ${total}`;

function calculate () {
// Display KM Driven Slider
var kmPerYear = document.getElementById("kmdriven");
var kmOutput = document.getElementById("myAvgKM")
kmOutput.innerHTML = kmPerYear.value;

// Display Avg Mileage
var avgKM = document.getElementById("avgkm")
var avgKMOutput = document.getElementById("myAvgKPL")
avgKMOutput.innerHTML = avgKM.value;


//Display Avg Price
var avgPrice = document.getElementById("priceValue")
var priceOutput = document.getElementById("price")
priceOutput.innerHTML = avgPrice.value;

// The Math!
var total = (kmPerYear.value / 100) * (avgKM.value * 1.2) * avgPrice.value;
  
  document.getElementById("savings").innerHTML = `$ ${total}`;
  
}
.response-container {
  display: flex;
}

   
<div>
  <p>KM Driven per Year</p>
  <p id="myAvgKM"></p>
  <input onchange="calculate()" type="range" min="0" max="300000" value="80000" step="1000" class="slider" id="kmdriven">
  
  <p>On average, my truck gets around:</p>
    <div class="response-container">
      <p id="myAvgKPL"></p>
      <p>L/100KM</p>
    </div>
  <input  onchange="calculate()"  type="range" min="4" max="60" value="40" id="avgkm">
  
  <p>Diesel prices are usually:</p>
  <p id="price"></p>
  <input  onchange="calculate()"  type="range" min="0.000" max="3.000" value="1.308" step=".001" id="priceValue">
</div>

<div>
  <p>In the first year alone, our services would save you:</p>
  <p id="savings"></p>
</div>

0
投票

在您的javascript文件末尾添加窗口加载脚本。window.onload=calculate;

https:/codepen.iosanjayismpenvYNaoap。

© www.soinside.com 2019 - 2024. All rights reserved.