Question

我正在尝试创建预算滑块，基本上我希望获得滑块确定的所有值的总和。

我无法弄清楚我错过了哪一步。这个想法是让用户在每个类别中设置他们的费用，最后，他们将看到他们所有费用的总和。

您可以在下面看到该代码段的示例。

＆＃13;

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

var sliders = document.getElementById("therange");
var result = document.getElementById("num");
result.innerHTML = this.value;

sliders.oninput = function() {
  result.innerHTML = this.value;
}

var sliderss = document.getElementById("yrange");
var answer = document.getElementById("transport");
answer.innerHTML = this.value;

sliderss.oninput = function() {
  answer.innerHTML = this.value;
}

var sliderm = document.getElementById("mrange");
var res = document.getElementById("misc");
res.innerHTML = this.value;

sliderm.oninput = function() {

  res.innerHTML = this.value;
}
$(function() {
  $('input[type=range]').change(getTotal); // not () - you're not calling the function
  getTotal(); // initialy call it
});

function getTotal() {
  var first = document.getElementById("demo");
  var second = document.getElementById("num");
  var third = document.getElementById("transport");
  var fourth = document.getElementById("misc")
  total.innerHTML = this.gettotal; // here you used the slide slide1 without initializing them at all
}

＆＃13;

.budgetpanel {
  background-color: white;
  height: 650px;
  width: 50%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.slidecontainer {
  width: 75%;
  /* Width of the outside container */
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4caf50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4caf50;
  cursor: pointer;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>My Budget</title>
  <link rel="stylesheet" type="text/css" href="slider.css">
  <!-- <script src="slider.js"></script> -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>


<body>

  <!-- rent -->
  <div class="budgetpanel">
    <h1> My Budget</h1>
    <p>Insert your expected monthly expenses.</p>

    <!-- Sliders -->
    <div class="slidecontainer">
      <p>Rent</p>
      <input type="range" min="0" max="5000" value="0" class="slider" id="myRange">
      <p>Value $: <span id="demo"></span></p>
    </div>

    <!-- Food -->
    <div class="slidecontainer">
      <p>Food</p>
      <input type="range" min="0" max="1000" value="0" class="slider" id="therange">
      <p>Value $: <span id="num"></span></p>
    </div>

    <!-- Transportation -->
    <div class="slidecontainer">
      <p>Transportation</p>
      <input type="range" min="0" max="1000" value="0" class="slider" id="yrange">
      <p>Value $: <span id="transport"></span></p>
    </div>

    <!-- Misc -->
    <div class="slidecontainer">
      <p>Misc</p>
      <input type="range" min="0" max="1000" value="0" class="slider" id="mrange">
      <p>Value $: <span id="misc"></span></p>
    </div>

    <div id="totals">
      <p>Total $:<span id="total"></span></p>
    </div>


  </div>


</body>

</html>

＆＃13;

Answer 1

function getTotal() {
  var first = document.getElementById("demo").innerText;
  var second = document.getElementById("num").innerText;
  var third = document.getElementById("transport").innerText;
  var fourth = document.getElementById("misc").innerText;
  total.innerHTML = Number(first) + Number(second) + Number(third) + Number(fourth); 
}

.innerText返回数字中的值，将String类型转换为Number类型，添加它们，然后将其设置为total。

Answer 2

getTotal()需要加起来first，second，third和fourth。

您在getTotal()中也使用了错误的ID，您需要获取每个ID的值。

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

var sliders = document.getElementById("therange");
var result = document.getElementById("num");
result.innerHTML = result.value;

sliders.oninput = function() {
  result.innerHTML = this.value;
}

var sliderss = document.getElementById("yrange");
var answer = document.getElementById("transport");
answer.innerHTML = answer.value;

sliderss.oninput = function() {
  answer.innerHTML = this.value;
}

var sliderm = document.getElementById("mrange");
var res = document.getElementById("misc");
res.innerHTML = res.value;

sliderm.oninput = function() {

  res.innerHTML = this.value;
}
$(function() {
  $('input[type=range]').change(getTotal); // not () - you're not calling the function
  getTotal(); // initialy call it
});

function getTotal() {
  var first = parseInt(slider.value) || 0;
  var second = parseInt(sliders.value) || 0;
  var third = parseInt(sliderss.value) || 0;
  var fourth = parseInt(sliderm.value) || 0;
  document.getElementById("total").innerHTML = first + second + third + fourth;
}

.budgetpanel {
  background-color: white;
  height: 650px;
  width: 50%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.slidecontainer {
  width: 75%;
  /* Width of the outside container */
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4caf50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4caf50;
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
  <title>My Budget</title>
  <link rel="stylesheet" type="text/css" href="slider.css">
  <!-- <script src="slider.js"></script> -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>


<body>

  <!-- rent -->
  <div class="budgetpanel">
    <h1> My Budget</h1>
    <p>Insert your expected monthly expenses.</p>

    <!-- Sliders -->
    <div class="slidecontainer">
      <p>Rent</p>
      <input type="range" min="0" max="5000" value="0" class="slider" id="myRange">
      <p>Value $: <span id="demo"></span></p>
    </div>

    <!-- Food -->
    <div class="slidecontainer">
      <p>Food</p>
      <input type="range" min="0" max="1000" value="0" class="slider" id="therange">
      <p>Value $: <span id="num"></span></p>
    </div>

    <!-- Transportation -->
    <div class="slidecontainer">
      <p>Transportation</p>
      <input type="range" min="0" max="1000" value="0" class="slider" id="yrange">
      <p>Value $: <span id="transport"></span></p>
    </div>

    <!-- Misc -->
    <div class="slidecontainer">
      <p>Misc</p>
      <input type="range" min="0" max="1000" value="0" class="slider" id="mrange">
      <p>Value $: <span id="misc"></span></p>
    </div>

    <div id="totals">
      <p>Total $:<span id="total"></span></p>
    </div>


  </div>


</body>

</html>

如何获取从范围滑块

2 个答案: