Cannot find the integer or not find the integer error coming while taking the sum of selected option in 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>

Here in code snippet you can see my html and jquery I'm using. when I selected values from select option then they will append to the card having selected1 for select option first and selected2 for select option two and selected3 for the select option third and when I clicked the button total then I want the total of the all selected value but there is an error

integer is not defined

you creat the variable just inside the `change` of first select,that's why in the last select, it is undefined; to use it, you must create it globally — Calvin Nunes, Aug 16 '18 at 18:58
Possible duplicate of [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — Karan Dhir, Aug 16 '18 at 19:00

Akrion · Answer 1 · 2018-08-16T20:00:27.743

You variables integer, string, mix are not defined in the button handler context.

You defined them in the scope of each of the previous handlers individually but not in the button one. You can either have their scope be above the button handlers so they can be accessible or do something like this:

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

Kapil gopinath · Answer 2 · 2018-08-16T19:31:48.933

Try this. Problem with code was that you didn't declare the variables globally which was needed in your case.

$(document).ready(function(){
var integer = string = mix = '';
        $("#selectFirst").on('change',function(){
          integer=$(this).attr('selected','selected').val();
          $("#text1").html(integer);
        })
        $("#selectSecond").on('change',function(){
          string=$(this).attr('selected','selected').val();
          $("#text2").html(string);
        })
        $("#selectThird").on('change',function(){
          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>

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. https://stackoverflow.com/help/how-to-answer — Mark Carpenter Jr, Aug 16 '18 at 19:11

score 0 · Answer 3 · answered Aug 16 '18 at 19:02

define integer, string and mix outside the functions not inside thats why they are undefined they are in different scopes

   var integer = "";
   $("#selectFirst").on('change',function(){
          integer=$(this).attr('selected','selected').val();
          $("#text1").html(integer);
        })

Cannot find the integer or not find the integer error coming while taking the sum of selected option in jQuery?

3 Answers3