输入范围-更改价格和数量

Question

我需要些帮助。我需要在“输入范围”中自动更改价格和数量，我只得到一个！有人能帮我吗？

下面是我的代码：

​

    <div class="col-12 border py-6">
                <div class="form-inline d-flex justify-content-center">
                  <label class="fw-600 fs-18 text-dark-green">Selecione a quantidade: </label>
                  <span id="demo" class="fw-700 my-1 ml-2 lead-3 w-80px">140</span>
                </div>
                <div class="range-slider d-flex justify-content-center">
                  <input class="range-slider__range w-70" type="range" value="40" min="1" max="30" step="1" id="myRange">
              </div>
    
              <script>
              var slider = document.getElementById("myRange");
              var output = document.getElementById("demo");
              output.innerHTML = slider.value;
    
              slider.oninput = function() {
                output.innerHTML = this.value;
              }
              </script>
    
    
              <div class="col-12 border text-center">
                <div class="pricing-3">
                  <h3 class="price m-0">
                    <span class="price-unit">R$</span> 
                    <strong>669,00</strong>
                    <small class="fs-18">/ mês</small>
                  </h3>
                </div>
              </div>

​

我需要它来改变根据Excel表格-> Excel

量化的Valor

1 R$ 9,99

2 R$ 17,99

3 R$ 26,99

4 R$ 35,99

5 R$ 39,99

6 R$ 47,99

7 R$ 50,99

8 R$ 57,99

9 R$ 64,99

10 R$ 68,99

11 R$ 75,99

12 R$ 82,99

13 R$ 89,99

14 R$ 96,99

15 R$ 103,99

16 R$ 110,99

17 R$ 117,99

18 R$ 124,99

19 R$ 131,99

20 R$ 124,99

21 R$ 130,99

22 R$ 136,99

23 R$ 142,99

24 R$ 148,99

25 R$ 150,99

26雷亚尔156,99美元

27 R$ 162,99

28 R$ 168,99

29 R$ 174,99

30雷亚尔$ 178,99

Answer 1

你想要这样的东西吗？

​

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var i = 1;
output.innerHTML = slider.value;

values = ["9,99", "17,99", "26,99", "35,99", "39,99", "47,99", "50,99", "57,99", "64,99", "68,99", "75,99", "82,99", "89,99", "96,99", "103,99", "110,99", "117,99", "124,99", "131,99", "124,99", "130,99", "136,99", "142,99", "148,99", "150,99", "156,99", "162,99", "168,99", "174,99", "178,99"]

slider.oninput = function() {

    var price = Number(this.value);
    output.innerHTML = price;
    document.getElementById("span_price").innerHTML = values[price - 1];
}

<div class="col-12 border py-6">
            <div class="form-inline d-flex justify-content-center">
              <label class="fw-600 fs-18 text-dark-green">Selecione a quantidade: </label>
              <span id="demo" class="fw-700 my-1 ml-2 lead-3 w-80px">140</span>
            </div>
            <div class="range-slider d-flex justify-content-center">
              <input class="range-slider__range w-70" type="range" value="40" min="1" max="30" step="1" id="myRange">
          </div>


          <div class="col-12 border text-center">
            <div class="pricing-3">
              <h3 class="price m-0">
                <span class="price-unit">R$</span> 
                <span id = "span_price"><strong>66,900</strong></span>
                <small class="fs-18">/ mês</small>
              </h3>
            </div>
          </div>

​

Answer 2

你想要这样吗？

​

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
let resultTableBody = document.querySelector("#results_table tbody");

output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
  document.getElementById("span_price").innerHTML = this.value * 66900/30;
  
  var trForEachResult = document.createElement("tr");
  var quantityTd = document.createElement("td");
  var quantityValue = document.createTextNode(this.value);
  quantityTd.appendChild(quantityValue);
  
  var priceTd = document.createElement("td");
  var priceValue = document.createTextNode(this.value * 66900/30);
  priceTd.appendChild(priceValue);
  
  trForEachResult.appendChild(quantityTd);
  trForEachResult.appendChild(priceTd);
  
  resultTableBody.appendChild(trForEachResult);

}

<div class="col-12 border py-6">
  <div class="form-inline d-flex justify-content-center">
    <label class="fw-600 fs-18 text-dark-green">Selecione a quantidade: </label>
    <span id="demo" class="fw-700 my-1 ml-2 lead-3 w-80px">140</span>
  </div>
  <div class="range-slider d-flex justify-content-center">
    <input class="range-slider__range w-70" type="range" value="40" min="1" max="30" step="1" id="myRange">
</div>
    
<div class="col-12 border text-center">
  <div class="pricing-3">
    <h3 class="price m-0">
      <span class="price-unit">R$</span> 
      <strong id="span_price">669,00</strong>
      <small class="fs-18">/ mês</small>
    </h3>
  </div>
</div>

<table id="results_table">
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>

​