How to get a specific array value from the array of Buttons

Question

I am really really newbie in javascript and jquery. I am now making a calculator.

This is my code.

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <meta charset="UTF-8">
    <script type="text/javascript">
      var buttonname = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "+", "-", "*", "/", "C", "Enter", "="];
      $(document).ready(function() {
        $("button").click(function() {
          // for(var i=0;i<buttonname.length;i++){
          var arrayvalue = buttonname[ ? ? ? ? ? ];
          var calculate = $("<p>" + arrayvalue + "</p>");
          $("#result").append(calculate);
          //}
        });
      });

    </script>
  </head>

  <body>
    <!--<textarea id="numberarea"></textarea><br>-->
    <script type="text/javascript">
      for (var i = 0; i < buttonname.length; i++) {
        document.write("<button>" + buttonname[i] + "</button>");
        if (i != 0 && (i % 4) == 0)
          document.write("<br>");
      }

    </script>
    <div id="result"></div>
  </body>

</html>

How should I do with line var arrayvalue = buttonname[] or with click function to get a specific value from the array in my case?

var arrayvalue = buttonname[x] where x is the specific value you wish to retrieve, starting from 0. — Obsidian Age
– Obsidian Age, Commented May 31, 2017 at 20:45
Could you attach the name as a property of the button so you could reference it that way? — Benjamin Commet
– Benjamin Commet, Commented May 31, 2017 at 20:46
this.innerText instead of buttonname[?????]? Otherwise, store it as a data- attribute. If you're determined to reference it by index (by using the buttonname[?] syntax), you'd have to somehow figure out the index of the button you pressed, but because it's nestled in with break tags, it'll be way more work than it's worth. — Joseph Marikle
– Joseph Marikle, Commented May 31, 2017 at 20:51
@ObsidianAge nono.. it is not so simple. I understand your code but your advice only prints out the value which is in the x-th index but I want if I click on the first button, 1 would be printed out, 2nd button, 2 should be printed out. So it should print out different values every time. — ProgramLover
– ProgramLover, Commented May 31, 2017 at 20:52
@BenjaminCommet sorry may be no...? Newbie.. hehe.. Learned only few lessons — ProgramLover
– ProgramLover, Commented May 31, 2017 at 20:55

JstnPwll · Accepted Answer · 2017-05-31 20:52:24Z

2

You can add an attribute to each button when you create them, and then reference that attribute from the event argument of your click handler. Something like this:

var buttonname = ["1","2","3","4","5","6","7","8","9","0","+","-","*","/","C","Enter","="];
$(document).ready(function(){
  $("button").click(function(ev){
   // for(var i=0;i<buttonname.length;i++){
        var arrayvalue = buttonname[$(ev.target).attr('data-index')];
        var calculate = $("<p>"+arrayvalue+"</p>");
        $("#result").append(calculate);
    //}
  });
});

for(var i = 0; i <buttonname.length; i++){
  document.write("<button data-index="+i+">"+buttonname[i]+"</button>");
   if(i != 0 && (i%4) == 0)
   document.write("<br>");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="result"></div>

answered May 31, 2017 at 20:52

JstnPwll

8,7252 gold badges36 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ProgramLover Over a year ago

Thank you! Works! Actually I don't understand what does attr('data-index') mean now but you saved me!

JstnPwll Over a year ago

You can see on the document.write line I'm setting an attribute on the button HTML element: "<button data-index="+i+">". The .attr() function is a jQuery method for getting the value of the attribute with that name.

ProgramLover Over a year ago

aha! Now I understand! Thank you very much!

JstnPwll Over a year ago

For event listeners, the callback function will be passed an Event object as the first argument. This event object contains information about the event; ev.target is the element which triggered the event (in this case, the individual button).

ProgramLover Over a year ago

Thank you! I just thought that is really similar like java

Collectives™ on Stack Overflow

How to get a specific array value from the array of Buttons

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related