logo标签列表

如何在Javascript中将变量的值从字符串转换为整数？

javascriptjqueryhtmlinteger
3
我弄了个fiddle! https://jsfiddle.net/ajc100/vrzme0st/ 我正在尝试制作一个保险计算器（使用虚假数字）。它由一个包含单选按钮和下拉列表的表单组成，每个单选按钮或下拉列表的值都是一个数字。我使用alert来显示用户选择的正确数字。现在我需要把这些数字加起来得到总数。我的问题是我不知道如何将变量的值转换为整数，这是一个数字，以便Javascript可以理解它并对其进行求和。这是我的代码（实际上是Jquery）。如您所见，我已经尝试了几种不同的方法来获取变量的值并将其转换为数字，但似乎没有任何方法可行。非常感谢您的帮助。
 <ul>
  <li><form id="sex"><legend>Sex</legend> <fieldset>
  <input type="radio" name="sex" value="20" id="Female" class="firstInput css-checkbox" />
  <label class="css-label" for="Female">Female</label>
     <input type="radio" name="sex" value="30" id="Male" class="css-checkbox" />
     <label class="css-label" for="Male">Male</label></fieldset>
      </form>
      </li>

  <li>
  <form id="age"><legend>Age</legend><fieldset>
    <input type="radio" id="sixteen" name="age" value="40" class="firstInput css-checkbox" />
    <label class="css-label" for="sixteen">16-25</label>
      <input id="twentysix" type="radio" name="age" value="30" class="css-checkbox" />
      <label class="css-label" for="twentysix">26-34</label>
        <input type="radio" id="thirtyfive" name="age" value="20" class="css-checkbox"  />
        <label class="css-label" for="thirtyfive">35-50</label>
          <input type="radio" name="age" id="fifty" value="15" class="css-checkbox" />
          <label class="css-label" for="fifty">50+</label></fieldset>
          </form>
          </li>

  <li>Car Color
    <select name="color" id="car">
      <option value="80">red</option>
      <option value="50">silver</option>
      <option value="50">black</option>
      <option value="30">white</option>
      <option value="50">other</option>
    </select>
  </li>

  <li>Car Year
    <select name="year" id="year">
      <option value="60">2015+</option>
      <option value="40">2000 - 2015</option>
      <option value="60">1999 or before </option>

    </select></li>

    <li>Citations in past year
      <select name="citations" id="citations">
        <option value="20">1</option>
        <option value="30">2</option>
        <option value="40">3+</option>

      </select>

    </li>
  </ul>

  <hr>
  <div class="total">Total</div>

</div>

<script>

  $('#sex input').on('change', function() {
   var sex = ($('input[name="sex"]:checked', '#sex').val()); 
   parseInt(sex);
   alert(sex);
 });

  $('#age input').on('change', function() {
   var age = ($('input[name="age"]:checked', '#age').val()); 
   number(age);
   alert(age);
 });

  $('#car').on('change', function() {
   var car = parseInt($('#car').val(),10); 
   alert(car);
 });

  $('#year').on('change', function() {
   var year = +($('#year').val()); 
   alert(year);
 });

  $('#citations').on('change', function() {
   var citations = ($('#citations').val()); 
   parseInt(citations);
   alert(citations);
 });

我尝试了这个方法，但仍然无法正常工作。即使将变量转换为数字，我似乎也无法将它们相加：

<script>
$(document).ready(function() {

  $('#sex input').on('change', function() {
    sex = ($('input[name="sex"]:checked', '#sex').val());
    sex = +sex;
  });

  $('#age input').on('change', function() {
    age = ($('input[name="age"]:checked', '#age').val());
    age = +age;
  });

  $('#car').on('change', function() {
    car = ($('#car').val());
    car = +car;
  });

  $('#year').on('change', function() {
    year = ($('#year').val());
    year = +year;
  });

  $('#citations').on('change', function() {
    citations = ($('#citations').val());
    citations = +citations;
  });

  var total = sex + age + car + year + citations;
  $(".total").text("Total: " + total);

});

</script>
可能是重复的问题：如何在JavaScript中将字符串转换为整数？ - Bill the Lizard
@BilltheLizard 他已经知道 parseInt 函数了。他困惑的是如何使用函数。 - Barmar
你想在哪里添加值？ - trincot
我正在尝试根据某人选择的答案添加价值，以计算汽车保险的总费用。 - AJMC
3个回答
2

parseInt和Number是返回数字值的函数。它们不会改变参数。

因此，应该写成：

sex = parseInt(sex);

或者：

age = number(age);

但更简单和高效的是单元加：

age = +age;

您没有展示添加变量值的代码，但是在您转换变量之后，您可以按预期添加它们。
事件顺序和自动创建的变量
您的代码问题在于，在页面加载时计算总数，此时点击处理程序（sex，age等）尚未设置任何变量。相反，浏览器会为每个具有“id”属性的元素创建一个变量，并使用该名称。但是这些变量代表DOM元素，因此您的总数无法工作。并且当用户更改选择时，该总数永远不会更新。
相反，我建议使用以下代码：
function refreshTotal() {
    var sex = +$('input[name="sex"]:checked', '#sex').val();
    var age = +$('input[name="age"]:checked', '#age').val();
    var car = +$('#car').val();
    var year = +$('#year').val();
    var citations = +$('#citations').val();
    var total = sex + age + car + year + citations;
    $(".total").text("Total: " + total);
}

// Create one handler for all input/select changes:
$('input,select').on('change', refreshTotal);

// Also at page load, calculate the total 
$(refreshTotal);
我尝试过这个，但仍然没有成功。我会在原来的问题上添加内容，以展示我所做的。 - AJMC
那是因为你还有其他概念上的问题。请看我回答中的补充部分。我添加了一些可行的代码。 - trincot
好的，目前为止一切都很好，但还有一件事。当页面加载时我们刷新它，总数显示NaN。我不想让它显示那个，所以我删除了页面加载时调用函数的代码来解决这个问题，但是当你首次选择男性或女性时，它会显示NaN，并且只有在进行另一个选择后才会更改为数字。你有什么想法吗？ - AJMC
将调用refreshTotal（）的代码放在body标签结束之前，或将refreshTotal（不带括号）传递给$（...）;，以便在DOM准备就绪时执行。我在我的答案中更新了它。 - trincot
实际上，在我问了最后一个问题之后，我意识到如果我按顺序回答问题也不起作用，我认为这是因为它试图获取变量的值，而尚未进行选择，因此我添加了一些代码来检查每个变量是否为NaN，如果是，则将其更改为0，这就解决了问题。感谢您的所有帮助！！！ - AJMC
2

当你调用一个函数时，通常需要将结果分配给某个变量；函数本身不能改变变量的值（接受对象作为参数的函数可以修改对象的内容，但这与修改调用中使用的变量不同）。当你编写：

parseInt(sex);

它调用了函数，但没有对结果进行任何处理。你需要做的是：

sex = parseInt(sex, 10);

在调用parseInt时，您应始终指定基数；规范不要求默认为十进制，并且一些旧浏览器具有不同的默认值。

我不明白为什么这个被踩了。你得到了我的投票。 - trincot
@trincot 有人给所有答案投了反对票。我怀疑是那个重复投票者，他可能认为这太琐碎了，不值得回答。 - Barmar
啊，是的，可能就是这样。 - trincot
我尝试了这个方法以及下面回答者的建议。但我仍然无法将变量值相加。这与我设置代码的方式有关吗？也许与作用域有关？ - AJMC
当页面首次加载时，您正在计算总数，但在用户编辑输入后，您从未更新它。 - Barmar
1
你可以通过以下方式将字符串转换为整数：

var a = "10";
var b = parseInt(a);

希望有所帮助！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接