CODEWITHSUNDEEP
jqueryhtml
Manariba
Manariba

Reputation: 376

Write value of class JQuery

I want to write the value of the selected button in the display. They are all class "nummer". Now are all the numbers displayed on the display.

Is there a proper way to do that on my manner?

JQUERY

$(document).ready(function()
{
     $(".nummer").click(function() {
          $("#display").html($(".nummer").text());
     });                                                    
});

HTML

<div id="display">1234  </div>
  <div id="toetsen">
      <ul>
          <li><a class="nummer" href="#" id="knop1">1</a></li>
          <li><a class="nummer" href="#" id="knop2">2</a></li>
          <li><a class="nummer" href="#" id="knop3">3</a></li>
      </ul>
      <ul>
          <li><a class="nummer" href="#" id="knop4">4</a></li>
          <li><a class="nummer" href="#" id="knop5">5</a></li>
          <li><a class="nummer" href="#" id="knop6">6</a></li>
      </ul>
      <ul>
          <li><a class="nummer" href="#" id="knop7">7</a></li>
          <li><a class="nummer" href="#" id="knop8">8</a></li>
          <li><a class="nummer" href="#" id="knop9">9</a></li>
      </ul>
      <ul>
          <li><a href="#" id="knopc">C</a></li>
          <li><a class="nummer" href="#" id="knop0">0</a></li>
          <li><a href="#" id="knopok">OK</a></li>
      </ul>  
  </div>

Upvotes: 1

Views: 42

Answers (3)

Arun P Johny
Arun P Johny

Reputation: 388416

You need to use this in the click handler to refer to currently clicked nummer element.

$(document).ready(function() {
  $(".nummer").click(function() {
    $("#display").html($(this).text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="display">1234</div>
<div id="toetsen">
  <ul>
    <li><a class="nummer" href="#" id="knop1">1</a>
    </li>
    <li><a class="nummer" href="#" id="knop2">2</a>
    </li>
    <li><a class="nummer" href="#" id="knop3">3</a>
    </li>
  </ul>
  <ul>
    <li><a class="nummer" href="#" id="knop4">4</a>
    </li>
    <li><a class="nummer" href="#" id="knop5">5</a>
    </li>
    <li><a class="nummer" href="#" id="knop6">6</a>
    </li>
  </ul>
  <ul>
    <li><a class="nummer" href="#" id="knop7">7</a>
    </li>
    <li><a class="nummer" href="#" id="knop8">8</a>
    </li>
    <li><a class="nummer" href="#" id="knop9">9</a>
    </li>
  </ul>
  <ul>
    <li><a href="#" id="knopc">C</a>
    </li>
    <li><a class="nummer" href="#" id="knop0">0</a>
    </li>
    <li><a href="#" id="knopok">OK</a>
    </li>
  </ul>
</div>

Upvotes: 1

Mivaweb
Mivaweb

Reputation: 5732

You need this in order to get the current selected .number text:

$(document).ready(function()
{
    $(".nummer").click(function() {
        $("#display").html($(this).text());
    });                                                    
});

Upvotes: 1

Tushar
Tushar

Reputation: 87213

You need to use $(this) inside the click handler to get the text of the currently clicked element.

$(".nummer").on('click', function() {
    $("#display").html($(this).text());
});

Upvotes: 3

Related Questions