Question posted in
You can find the official documentation here.

how to access value of variable which exists inside of click handler, and store outside of it in variable – Jquery ajax

Question may sound tricky because I’m new in JS programming. First let me show you code, 

<ul id="myid4" class="c_select_ul">
  <li>
   <div class="option op_cl">
     <div class="color"></div>
       <p>White</p>
     </div>
  </li>
  <li>
   <div class="option op_cl">
    <div class="color black"></div>
     <p>Black</p>
   </div>
  </li>                                  
</ul>

and JS code is

        $("ul[id*=myid4] li").click(function () {
          var color = $(this).text();
          color = color.replace(/^s+|s+$/g, "");
            console.log(color);
        });

So what I want do is, access the value of variable “color” outside of click handler and and store in another variable. It can be logged inside of it as I have shown in code. I want to use it in other functions also like to send with ajax call.
I can make ajax call inside of it but, I have three other selections to make in same way and send the four values via ajax call and receive result.

thanks in advance.

Tags:

3

Answers


  1. 0

    This question is about the scope of the variable, Global vs local variable. You have declared variable inside the callback of click event, so it dies once the execution is over.
    To solve this, you need to declare variable globally. You can declare that outside the callback handler.

    <html>
    <head>
        <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
    </head>
    <body>
        <ul id="myid4" class="c_select_ul">
            <li>
             <div class="option op_cl">
               <div class="color"></div>
                 <p>White</p>
               </div>
            </li>
            <li>
             <div class="option op_cl">
              <div class="color black"></div>
               <p>Black</p>
             </div>
            </li>                                  
          </ul>

          <button type="button" onclick="submit()">submit</button>
          <script>
                var color;
                $("ul[id*=myid4] li").click(function () {
                  color = $(this).text();
                  color = color.replace(/^s+|s+$/g, "");
                    console.log(color);
                });
                function submit() {
                    console.log('printing from other function-->', color);
                }
                </script>
    </body>
</html>

    Now, you can access the variable everywhere inside the JS file.

    Login or Signup to reply.
  2. 0

    If you want to call AJAX once all 4 selections are made, use class selector instead of ID:

    var state = {};

var handleSelect = function (index, selected) {
  state[index] = selected;

  if (Object.keys(state).length === 4) {
    console.log('All 4 selection are made', state);
    // Call ajax
  }
};

$(".c_select_ul li").click(function () {
  var color = $(this).text();
  color = color.replace(/^s+|s+$/g, "");
  console.log(color);

  var index = $(this).closest("ul").index("ul");
  handleSelect(index, color);
});
    Login or Signup to reply.
  3. 0

    I assume you are using Jquery. You can also do sth like this.

    window.color = ""; //notice the window.
   $(function(){
       ....
   })
   function myfunction(){
     $("ul[id*=myid4] li").click(function () {
      var color = $(this).text();
      color = color.replace(/^s+|s+$/g, "");
        console.log(color);
    });
   }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search