javascript - অবজ - জাভাস্ক্রিপ্ট বাংলা বই




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

ইনলাইন জাভাস্ক্রিপ্ট ছাড়া কিভাবে এটা করতে

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

শুধুমাত্র আধুনিক ব্রাউজার

<!DOCTYPE html>
<html>
<head>
<script>
(function(doc){
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }
    doc.addEventListener('click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault();
          doSomething.call(e.target, e);
      }
    });
})(document);

function insertHTML(str){
  var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
  lastScript.insertAdjacentHTML("beforebegin", str);
}

function doSomething(event){
  console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script>
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>

<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">

<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>

</body>
</html>

ক্রস ব্রাউজার

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var cb_addEventListener = function(obj, evt, fnc) {
        // W3C model
        if (obj.addEventListener) {
            obj.addEventListener(evt, fnc, false);
            return true;
        } 
        // Microsoft model
        else if (obj.attachEvent) {
            return obj.attachEvent('on' + evt, fnc);
        }
        // Browser don't support W3C or MSFT model, go on with traditional
        else {
            evt = 'on'+evt;
            if(typeof obj[evt] === 'function'){
                // Object already has a function on traditional
                // Let's wrap it with our own function inside another function
                fnc = (function(f1,f2){
                    return function(){
                        f1.apply(this,arguments);
                        f2.apply(this,arguments);
                    }
                })(obj[evt], fnc);
            }
            obj[evt] = fnc;
            return true;
        }
        return false;
    };
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }

    cb_addEventListener(doc, 'click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault ? e.preventDefault() : e.returnValue = false;
          doSomething.call(e.target, e);
      }
    });
})(document);

function insertHTML(str){
  var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
  lastScript.insertAdjacentHTML("beforebegin", str);
}

function doSomething(event){
  console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script type="text/javascript">
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>

<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">

<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>

</body>
</html>

JQuery সঙ্গে ক্রস ব্রাউজার

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function($){
    $(document).on('click', '.click-me', function(e){
      doSomething.call(this, e);
    });
})(jQuery);

function insertHTML(str){
  var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
  lastScript.insertAdjacentHTML("beforebegin", str);
}

function doSomething(event){
  console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script type="text/javascript">
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>

<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">

<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>

</body>
</html>

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

এখানে একটি jsfiddle
কিছু অদ্ভুত কারণের জন্য insertHTML ফাংশন এটি আমার সমস্ত ব্রাউজারগুলিতে কাজ করে না তবে insertHTML কাজ করে না।

আপনি যদি এটির drawbacks মনে না করেন তবে আপনি সর্বদা document.write insertHTML সাথে insertHTML করতে পারেন

<script>
document.write('<button class="click-me" id="btn1">Button 1</button>');
</script>

সূত্র:

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

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

function 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(this.id)">B1</button>
<button id="2" onClick="reply_click(this.id)">B2</button>
<button id="3" onClick="reply_click(this.id)">B3</button>

<script type="text/javascript">
function reply_click(clicked_id)
{
    alert(clicked_id);
}
</script>

এটি this.id clicked_id যা this.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);
      });
    });

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


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

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

<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);
}

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


বোতাম 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;

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

একটি ইভেন্ট হ্যান্ডলার বলা হয়, এটি ক্লিক করা হয় উপাদান প্রসঙ্গের মধ্যে বলা হয়। সুতরাং, সনাক্তকারী এটি আপনি যে 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"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" 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)
}

<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;
}







html