javascript - 无法找到整数或在 jQuery 中对所选选项求和时出现找不到整数错误？

Question

$(document).ready(function(){
        $("#selectFirst").on('change',function(){
          var integer=$(this).attr('selected','selected').val();
          $("#text1").html(integer);
        })
        $("#selectSecond").on('change',function(){
          var string=$(this).attr('selected','selected').val();
          $("#text2").html(string);
        })
        $("#selectThird").on('change',function(){
          var mix=$(this).attr('selected','selected').val();
          $("#text3").html(mix);
        })
        $("#addBtn").click(function(){
          var grandTotal= integer + string + mix;
          $("#total").html(grandTotal);
        })
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper p-5">
      <div class="row">
        <div class="col-md-8 center-block card p-3 mb-4">
          <div class="row">
            <div class="col-md-2">
              <select class="custom-select form-control" id="selectFirst">
                <option selected>Choose...</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
              </select>
            </div>
            <div class="col-md-2">
              <select class="custom-select form-control" id="selectSecond">
                <option selected>Choose...</option>
                <option value="one">one</option>
                <option value="two">two</option>
                <option value="three">three</option>
              </select>
            </div>
            <div class="col-md-2">
              <select class="custom-select form-control" id="selectThird">
                <option selected>Choose...</option>
                <option value="1">1</option>
                <option value="two">two</option>
                <option value="3">3</option>
              </select>
            </div>
            <div class="col-md-6">
              <div class="card bg-primary text-white">
                <div class="card-body">
                  <ul class="list-unstyled">
                    <li><b>Selected-1:</b><span class="ml-3" id="text1"></span></li>
                    <li><b>Selected-2:</b><span class="ml-3" id="text2"></span></li>
                    <li><b>Selected-3:</b><span class="ml-3" id="text3"></span></li>
                    <li class="mb-3"><b>Total:</b><span class="ml-3" id="total"></span></li>
                    <input type="button" name="add-btn" value="Add" class="btn btn-danger" id="addBtn">
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div><!-- row-closed-->
    </div>

在代码片段中，您可以看到我正在使用的 html 和 jquery。当我从选择选项中选择值时，它们将附加到卡片上，其中第一个选项为 selected1，第一个选择选项为 selected2，第二个选项为 selected3选择第三个选项，当我单击按钮总计时，我想要所有选定值的总计，但出现错误

integer is not defined

Answer 1

变量整数、字符串、混合未在按钮处理程序上下文中定义。

您在前面每个处理程序的范围中单独定义了它们，但不在按钮处理程序中定义了它们。您可以将它们的作用域置于按钮处理程序上方，以便可以访问它们，或者执行如下操作:

$("#addBtn").click(function(){
    var integer=$('#selectFirst').val();
    var string=$('#selectSecond').val();
    var mix=$('#selectThird').val();
    $("#total").html(integer + string + mix);
})