Berechnen Sie den Gesamtpreis mit unterschiedlichen Prozentsätzen für jede Erhöhung

Question

Ich versuche, einen Rechner zur Preisschätzung zu schreiben

So:

Der Preis für 1000 MTU beträgt 0,035, die Gesamtsumme beträgt also 35 Der MTU-Preis für 2000 wird 0,034 betragen, insgesamt wird er 67 betragen Der Preis für 3000 MTU beträgt 0,0329 und die Gesamtsumme beträgt 98,79

Warte...

Ich habe den folgenden Code geschrieben, aber er gibt einen NaN-Fehler aus.

Alle neuen Vorschläge zum Schreiben von effizientem Code wären sehr willkommen.

<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

使用parseInt()将输入值从字符串转换为整数，以便您可以计算价格。 除此之外，您在事件侦听器中使用了函数 calculateCost()，我在代码中更正了这一点，所以这就是结果：

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;
}