Kira jumlah harga pada peratusan yang berbeza untuk setiap kenaikan

Question

Saya cuba menulis kalkulator untuk anggaran harga

Seperti ini:

Harga untuk 1000 MTU ialah 0.035 jadi jumlahnya akan menjadi 35 Harga 2000 MTU akan menjadi 0.034 jumlah akan menjadi 67 Harga untuk 3000 MTU akan menjadi 0.0329 dan jumlahnya akan menjadi 98.79

Tunggu...

Saya menulis kod berikut tetapi ia memberikan ralat NaN.

Sebarang cadangan baharu untuk menulis kod yang cekap akan sangat dihargai.

<p id= "rangeValue" >

</p>
<div class="range-wrap">
        <div class="range-value" id="rangeV"></div>
<input id="myinput" type="range" name="points" min="1000" max="100000" value="1000" oninput="rangeValue.innerText = this.value" >
</div>

const slider = document.getElementById("myinput")
const min = slider.min
const max = slider.max
const value = slider.value

slider.style.background = `linear-gradient(to right, #0080FF 0%, #0080FF ${(value-min)/(max-min)*100}%, #596680 ${(value-min)/(max-min)*100}%, #596680 100%)`

slider.oninput = function() {
  this.style.background = `linear-gradient(to right, #0080FF 0%, #0080FF ${(this.value-this.min)/(this.max-this.min)*100}%, #596680 ${(this.value-this.min)/(this.max-this.min)*100}%, #596680 100%)`
};


// Add a change event listener to the range slider
   slider.addEventListener('change', function() {
  // Get the value of the range slider
  var value = this.value;
  var container = document.querySelector('#rangeValue');
  
  let cost;
  function calculateCost(value) {
  if (value === 1000) {
    cost = 0.0350;
  } else if (value === 2000) {
    cost = 0.0340;
  } else {
    cost = 0;
  }
  return cost;
}
var totval=value * cost;
totval = totval.toFixed(2);
  
  container.innerHTML = totval;
  // Print the value to the console
 // console.log(value);
});

const
    range = document.getElementById('myinput'),
    rangeV = document.getElementById('rangeV'),
    setValue = ()=>{
        const
            newValue = Number( (range.value - range.min) * 100 / (range.max - range.min) ),
            newPosition = 10 - (newValue * 0.2);
        rangeV.innerHTML = `<span>${range.value}</span>`;
        rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
    };
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);

#myinput {
  border-radius: 8px;
  height: 8px;
  width: 100%;
  outline: none;
  -webkit-appearance: none;
}

input[type='range']::-webkit-slider-thumb {

  -webkit-appearance: none;
   width: 20px;
  height: 20px;
  border-radius: 50%;
   background: #0080FF;
}


.range-wrap{
    width: 500px;
    position: relative;
}
.range-value{
    position: absolute;
    top: 150%;
}
.range-value span{
    width: 30px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: transparent;
    color: #0A0E1C;
    font-size: 20px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 6px;
}
.range-value span:before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    margin-top: -1px;
}```

Answer 1

Gunakan parseInt()将输入值从字符串转换为整数 supaya anda boleh mengira harga. Selain itu, anda menggunakan fungsi dalam pendengar acara calculateCost(), saya membetulkannya dalam kod, jadi inilah hasilnya:

const slider = document.getElementById("myinput")
const min = parseInt(slider.min)
const max = parseInt(slider.max)
const value = parseInt(slider.value)

slider.style.background = `linear-gradient(to right, #0080FF 0%, #0080FF ${(value-min)/(max-min)*100}%, #596680 ${(value-min)/(max-min)*100}%, #596680 100%)`

slider.oninput = function() {
  this.style.background = `linear-gradient(to right, #0080FF 0%, #0080FF ${(this.value-this.min)/(this.max-this.min)*100}%, #596680 ${(this.value-this.min)/(this.max-this.min)*100}%, #596680 100%)`
};


// Add a change event listener to the range slider
slider.addEventListener('change', function() {
  // Get the value of the range slider
  var value = parseInt(this.value);
  var container = document.querySelector('#rangeValue');

  let cost;
    if (value === 1000) {
      cost = 0.0350;
    } else if (value === 2000) {
      cost = 0.0340;
    } else {
      cost = 0;
    }
  var totval=value * cost;
  totval = totval.toFixed(2);

  container.innerHTML = totval;
  // Print the value to the console
  // console.log(value);
});

const
    range = document.getElementById('myinput'),
    rangeV = document.getElementById('rangeV'),
    setValue = ()=>{
        const
            newValue = Number( (range.value - range.min) * 100 / (range.max - range.min) ),
            newPosition = 10 - (newValue * 0.2);
        rangeV.innerHTML = `${range.value}`;
        rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
    };
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);

#myinput {
  border-radius: 8px;
  height: 8px;
  width: 100%;
  outline: none;
  -webkit-appearance: none;
}

input[type='range']::-webkit-slider-thumb {

  -webkit-appearance: none;
   width: 20px;
  height: 20px;
  border-radius: 50%;
   background: #0080FF;
}


.range-wrap{
    width: 500px;
    position: relative;
}
.range-value{
    position: absolute;
    top: 150%;
}
.range-value span{
    width: 30px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: transparent;
    color: #0A0E1C;
    font-size: 20px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 6px;
}
.range-value span:before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    margin-top: -1px;
}