javascript অবজ জাভাস্ক্রিপ্ট-ক্লিক বাটন আইডি পেতে ক্লিক করুন




জাভাস্ক্রিপ্ট বাংলা বই (12)

কিভাবে বাটন ক্লিক করা হয় আইডি ক্লিক করা হয়?

<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>

function reply_click()
{
}

আপনি কেবল এই ভাবে এটি করতে পারেন:

<input type="button" id="1234" onclick="showId(this.id)" value="click me to show my id"/>
<script type="text/javascript">
   function showId(obj) {
        var id=obj;
        alert(id);
   }


<button id="1" onClick="reply_click(this)"></button>
<button id="2" onClick="reply_click(this)"></button>
<button id="3" onClick="reply_click(this)"></button>

function reply_click(obj)
{
var id = obj.id;
}

 <button id="1"class="clickMe"></button>

<button id="2" class="clickMe"></button>

<button id="3" class="clickMe"></button>



$('.clickMe').live('click',function(){

var clickedID = this.id;

});

<button id="1" class="clickMe"></button>
<button id="2" class="clickMe"></button>
<button id="3" class="clickMe"></button>

<script>
$('.clickMe').click(function(){
    alert(this.id);
});
</script>

বোতাম 1 বোতাম 2 বোতাম 3

var reply_click = function() { 
     alert("Button clicked, id "+this.id+", text"+this.innerHTML); 
} 
document.getElementById('1').onclick = reply_click; 
document.getElementById('2').onclick = reply_click; 
document.getElementById('3').onclick = reply_click;

(আমি মনে করি id বৈশিষ্ট্যটি একটি অক্ষর দিয়ে শুরু করতে হবে। ভুল হতে পারে।)

আপনি ইভেন্ট প্রতিনিধিদলের জন্য যেতে পারে ...

<div onClick="reply_click()">
    <button id="1"></button>
    <button id="2"></button>
    <button id="3"></button>
</div>

function reply_click(e) {
    e = e || window.event;
    e = e.target || e.srcElement;
    if (e.nodeName === 'BUTTON') {
        alert(e.id);
    }
}

... কিন্তু যে আপনি অপ্রয়োজনীয় ইভেন্ট মডেল সঙ্গে তুলনামূলকভাবে আরামদায়ক হতে হবে।


<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>

function reply_click()
{
   console.log(window.event.target.id)
}

বিশুদ্ধ জাভাস্ক্রিপ্ট দিয়ে আপনি নিম্নলিখিত কাজ করতে পারেন:

var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i < buttonsCount; i += 1) {
    buttons[i].onclick = function(e) {
        alert(this.id);
    };
}​

JsFiddle এটি পরীক্ষা করে দেখুন


যদি আপনি event.target ফাংশনে কোনও আর্গুমেন্ট পাস করতে না চান তবে ক্লিককৃত উপাদানটি পেতে event.target ব্যবহার করুন:

<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>

function reply_click()
{
    // event.target is the element that is clicked (button in this case).
    console.log(event.target.id);
}

দুঃখিত এটি একটি দেরী উত্তর কিন্তু এটি যদি আপনি এটি সত্যিই দ্রুত: -

$(document).ready(function() {
  $('button').on('click', function() {
     alert (this.id);
  });
});

এটি ক্লিক করা কোন বাটন আইডি পায়।

যদি আপনি কেবল একটি নির্দিষ্ট স্থানে ক্লিক করা বোতামের মূল্য পেতে চান, তবে সেগুলিকে কেবল পাত্রে রাখুন

<div id = "myButtons"> buttons here </div>

এবং কোড পরিবর্তন করুন: -

 $(document).ready(function() {
      $('.myButtons button').on('click', function() {
         alert (this.id);
      });
    });

আশা করি এটা কাজে লাগবে


সাধারণভাবে, আপনি যদি আপনার কোড এবং আপনার মার্কআপ আলাদা করেন তবে জিনিসগুলি সংগঠিত রাখা সহজ। আপনার সমস্ত উপাদান সংজ্ঞায়িত করুন, এবং তারপরে আপনার জাভাস্ক্রিপ্ট বিভাগে, সেই উপাদানগুলির উপর সঞ্চালিত বিভিন্ন ক্রিয়াকলাপগুলি সংজ্ঞায়িত করুন।

একটি ইভেন্ট হ্যান্ডলার বলা হয়, এটি ক্লিক করা হয় উপাদান প্রসঙ্গের মধ্যে বলা হয়। সুতরাং, সনাক্তকারী এটি আপনি যে DOM উপাদানটি ক্লিক করেছেন তা উল্লেখ করবে। তারপরে আপনি সেই সনাক্তকারীর মাধ্যমে উপাদানটির বৈশিষ্ট্যগুলি অ্যাক্সেস করতে পারেন।

উদাহরণ স্বরূপ:

<button id="1">Button 1</button>
<button id="2">Button 2</button>
<button id="3">Button 3</button>

<script type="text/javascript">
var reply_click = function()
{
    alert("Button clicked, id "+this.id+", text"+this.innerHTML);
}
document.getElementById('1').onclick = reply_click;
document.getElementById('2').onclick = reply_click;
document.getElementById('3').onclick = reply_click;
</script>

বিশুদ্ধ জাভাস্ক্রিপ্ট ব্যবহার করে: আমি এটা দেরী জানি কিন্তু ভবিষ্যতে মানুষ এটি সাহায্য করতে পারে হতে পারে:

এইচটিএমএল অংশে:

<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>

Javascipt কন্ট্রোলার মধ্যে:

function reply_click()
{
    alert(event.srcElement.id);
}

এইভাবে আমরা জাভাস্ক্রিপ্ট ফাংশন কল করার সময় উপাদানটির 'আইডি' বাঁধতে হবে না।





html