javascript - 如何获取从范围 slider 派生的值的总和-6ren

javascript - 如何获取从范围 slider 派生的值的总和

转载作者：行者123 更新时间：2023-11-28 02:19:59

我正在尝试创建一个预算 slider ，实际上我希望获得由 slider 确定的所有值的总和。

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

您可以在下面查看代码段示例。

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
}

.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>

最佳答案

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>

关于javascript - 如何获取从范围 slider 派生的值的总和，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48267942/

文章推荐： css - 为什么 `max-width` 有时是独占的？

文章推荐： javascript - 可选字段和下拉框的 jQuery ketchup 验证规则

文章推荐： c++ - 如何从 bmp 图像 C++ 纹理中获取 Sprite 集

文章推荐：大型 vector/数组的 C++ 未处理异常

c++ - 从shared_ptr 派生
我有一个无法理解的奇怪编译问题。 //I know, you should never derive from the STL Library template class SharedClass :
haskell - 派生 Haskell 类型并实现 (<*>)(<*>)
我是一个刚开始学习 Haskell 的菜鸟，所以如果我问愚蠢的问题，请耐心等待。最近我在 SO 中遇到了演示如何导出函数和表达式的类型和实现的问题(诸如 How can I understand "
haskell - 派生 GADT 的读取实例
如何自动派生此 GADT 的 Read 实例: {-# LANGUAGE GADTs, StandaloneDeriving #-} data TypeDec a where TypeDecInt
c# - 为什么泛型方法不能将具体(派生)类转换为其父类
我遇到了我想要的情况 Deal class要注意它DealDetail type反之亦然，我想 DealDetail注意Deal type .将来我想有很多 Deal 的后代和 DealDetails
c# - 如何从另一个程序集中的内部接口(interface)派生
我是 C# 新手，所以请多多包涵。好的，所以我在不同的程序集中有两个类需要相互引用: namespace AssemblyA { class A { private B MyB {
c# - 从 SynchronizationContext 派生
简而言之，我已经实现了一个派生自 SynchronizationContext 的类，以便 GUI 应用程序可以轻松地使用在 GUI 线程以外的线程上引发的事件。我非常感谢对我的实现的评论。具体来说，
c++ - 派生 C++ 类的内存分配
我正在设计一个小型系统，想知道如何为派生类分配内存的细微差别。如果我有两个类(class) class foo { public: int a; Foo(): a(0) {}; }; class
rust - 派生 PartialEq 时无法移出包含盒装特征对象的枚举的借用内容
我正在尝试编写一个派生 PartialEq 的枚举，其中包含一个手动执行此操作的特征对象。我使用了解决方案 here为了强制 Trait 的实现者编写相等方法。这无法编译: trait Trait {
rust - 派生 Debug 的枚举
以下代码可以编译(特别是 MyError 被识别为具有调试特性): use std::str; use std::fmt; #[derive(Debug)] enum MyError where F:
rust - 派生 PartialEq 时排除字段
是否有一种简单的方法来注释结构中的字段，以便在派生 PartialEq 特征时忽略它们？例如: #[derive(PartialEq,Eq)] pub struct UndirectedGraph {
C++从具有嵌套类的接口(interface)派生
我正在编写代码来处理“Foo”类型的对象。 foo 是一种容器，为了提供对其元素的高效和抽象访问，它提供了 Element 类型的嵌套类。 Element 包装对象在容器中的位置。现在，“Foo”可
c++ - 有没有办法在子范围内有一个指向父(派生)类的指针？
假设如下: class child : public parent { public: fun1(parent * obj); //somewhere on the child class
c++ - 如何使用匿名模板参数强制模板参数类从 super 派生
我有几个模板类 template class Transition { public: virtual Cost getCost() = 0; }; template class St
c++ - 无法从 `QSortFilterProxyModel` 派生
我正在尝试使用自定义 QSortFilterProxyModel . 这是我的标题: #include class QSortFilterProxyModel_NumbersLast : publi
c# - 如何从同一解决方案中的第二个项目的 Controller 派生
我正在使用 C# 和 mvc3。我在解决方案中添加了一个项目。我想创建一个新 Controller 并让它从我添加的项目中的 Controller 派生。我该怎么做？最佳答案在 Visual St
python - 派生 python 对象的深拷贝
我在 python 中有一个对象，它派生自 QtGui.QGraphicsPixmapItem，具有一些基本属性和方法。在对此对象的引用上调用 deepcopy 后，当我尝试使用该副本时收到一条错误消
c# - 派生 FixedDocument 的序列化
由于只能给FixedDocument添加页面，所以我写了一个派生类: public class CustomFixedDocument : FixedDocument { public voi
c++ - 派生 QMainWindow 并更改其布局
我在自定义 QMainWindow 时遇到了很大的问题，因为我不知道如何实现以下内容: 在 QMainWindow 文档中，QMainWindow 有一些用于工具栏、停靠小部件、状态栏和其他的特殊区域
c++ - 从 QAbstractScrollArea 派生
我想感受一下QT，决定写一个小的十六进制编辑器。为此，我需要一个允许滚动的小部件。经过一番研究，我发现 QTextEdit 为此目的派生自 QAbstractScrollArea。在阅读 QAbstr
algorithm - 反向确定性随机播放 -> 派生 key
我正在寻找一种可以从已经发生的洗牌过程中派生出 key 的算法。假设我们有被打乱的字符串“Hello”: "hello" -> "loelh" 现在我想从中导出一个 key k，我可以用它来撤销洗牌

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何获取从范围 slider 派生的值的总和