Question

我做了一个小提琴！ 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>

Answer 1

调用函数时，通常需要在某处分配结果;函数不能更改变量本身的值（将对象作为参数的函数可以修改对象的内容，但这与修改调用中使用的变量不同）。当你写

parseInt(sex);

它调用函数，但不对结果做任何事情。你需要这样做：

sex = parseInt(sex, 10);

在调用parseInt时，您还应始终指定基数;默认情况下，规范并不要求它是十进制的，而且一些旧的浏览器有不同的默认值。

Answer 2

parseInt和Number是返回数值的函数。他们不会改变论点。

所以写：

sex = parseInt(sex);

或：

age = number(age);

但更简单，最有效的是单一的加号：

age = +age;

您不会显示添加变量值的代码，但是在您按照这样的方式对它们进行转换后，您可以按预期添加它们。

事件顺序和自动创建的变量

您的代码的问题在于，您计算页面加载时的总计，此时没有任何变量由点击处理程序设置（sex，age，...）。相反，它们是由以下规则设置的：浏览器会自动为每个具有＆＃34; id＆＃34;的元素创建变量。属性，具有该名称。但是那些变量代表了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);

Answer 3

您可以通过

将字符串转换为int

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

希望它有所帮助！

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

3 个答案:

事件顺序和自动创建的变量