On click of any button should display the correct number for that button

Question

i am new to js
i am trying to achieve this task --->On click of any button should display the correct number for that button.
i am able to dispaly button with click event event
but not sure how to display correct number
providing my code below
is it possible to schieve using closures too

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

<button onclick="myFunction()">1</button>
<button onclick="myFunction()">2</button>
<button onclick="myFunction()">3</button>
<button onclick="myFunction()">4</button>
<button onclick="myFunction()">5</button>
<button onclick="myFunction()">6</button>

<p id="demo"></p>

This is possibly the same scenario http://stackoverflow.com/questions/8801787/get-index-of-clicked-element-using-pure-javascript — Imesha Sudasingha, Apr 12 '16 at 01:18
@all why did you guys mark it negative since I tried...but got stuck — , Apr 12 '16 at 01:26
@texirv Do not take downvotes personally - especially at this stage where you have no points to lose. SO is designed for more specific programming questions than you ask, but all of us started where you are now and many of us are understanding. Do not let the few "itchy trigger fingers" discourage you. Continue to ask questions. Ask often. Ask lots. Learn, and contribute. For those answering questions, SO is all about getting "points" - so (as soon as you have 15 points) upvote any answer that is helpful to you in any way -- and always accept the best answer (green checkmark). Good luck! — cssyphus, Apr 12 '16 at 01:28

The Process · Answer 1 · 2016-04-17T18:26:32.263

myFunction() is called by onclick(event){...} which has event as argument.
WebKit follows IE's old behavior of passing event, into handler functions. So in webkit and IE you can access event inside myFunction to get the event.target.

function myFunction() {
    document.getElementById("demo").innerHTML = event.target.innerHTML;
  }

Check the below snippet

function myFunction() {
  document.getElementById("demo").innerHTML = event.target.innerHTML;
}

<button onclick="myFunction()">1</button>
<button onclick="myFunction()">2</button>
<button onclick="myFunction()">3</button>
<button onclick="myFunction()">4</button>
<button onclick="myFunction()">5</button>
<button onclick="myFunction()">6</button>


<p id="demo"></p>

But Firefox isn't passing the event into handler functions, so you can achieve your goal by editing myFunction() to receive argument this in html (this will refer to the current HTML element).

function myFunction(el) {
  document.getElementById("demo").innerHTML = el.innerHTML;
}

<button onclick="myFunction(this)">1</button>
<button onclick="myFunction(this)">2</button>
<button onclick="myFunction(this)">3</button>
<button onclick="myFunction(this)">4</button>
<button onclick="myFunction(this)">5</button>
<button onclick="myFunction(this)">6</button>

<p id="demo"></p>

is it possible to achieve using closures :( – Apr 12 '16 at 01:36 — , Apr 12 '16 at 01:36

mmativ · Answer 2 · 2016-04-12T01:30:57.990

0

You can do like this.

function showNum(){
  var wew = $(this).text();
  console.log(wew)
  $('#demo').text(wew);
}

$('.btn').on('click', showNum);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
3. Test on JavaScript Closures - for loop with 5 Buttons. On click of any button should display the correct number for that button (Important). 

    <button class="btn">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>
    <button class="btn">4</button>
    <button class="btn">5</button>
    <button class="btn">6</button>


    <p id="demo"></p>

edited Apr 12 '16 at 01:30

answered Apr 12 '16 at 01:21

mmativ

1,414
14
25

any idea how to achieve with closure :( – Apr 12 '16 at 01:25
check the new code – mmativ Apr 12 '16 at 01:31

score 0 · Answer 3 · answered Apr 12 '16 at 01:24

If you don't want to use jQuery, this may help you: Fiddle

<body>
    <button onclick="myFunction(this)">1</button>
    <button onclick="myFunction(this)">2</button>
    <button onclick="myFunction(this)">3</button>
    <button onclick="myFunction(this)">4</button>
    <button onclick="myFunction(this)">5</button>
    <button onclick="myFunction(this)">6</button>


    <p id="demo"></p>

    <script>
      function myFunction(element) {
        document.getElementById("demo").innerHTML = element.innerHTML;
        console.log(element.innerHTML)
      }

    </script>

  </body>

any idea how to achieve with closure :( – Apr 12 '16 at 01:26 — , Apr 12 '16 at 01:26

On click of any button should display the correct number for that button

3 Answers3