जावास्क्रिप्ट - getAttribute () केवल पहले तत्व के लिए काम करता है [डुप्लिकेट]

Question

यह मेरा HTML है:

<div class="tool-top">
    <ul>
        <li><a role="button" id="button" value="bold"><i class="fas fa-bold"></i></a></li>
        <li><a role="button" id="button" value="italic"><i class="fas fa-italic"></i></a></li>
    </ul>
</div>

यह मेरा JS है:

window.onload = function(){
    document.getElementById('button').onclick = function(){
    
        var a = this.getAttribute('value');
        console.log(a);
    }
}

पहला बटन क्लिक करने पर मुझे 'बोल्ड' मिलता है, लेकिन दूसरे में कुछ भी नहीं

मैंने इस पृष्ठ को देखा , लेकिन इसने Jquery के साथ लिखा।

Answer 1

एक आईडी हमेशा अनोखी होनी चाहिए। आपके पास एक ही आईडी के साथ दो तत्व हैं, इसके बजाय एक वर्ग का उपयोग करें:

window.onload = function() {
  var btns = document.getElementsByClassName('button');

  for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
      var a = this.getAttribute('value');
      console.log(a);
    };
  }
};

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<div class="tool-top">
  <ul>
    <li><a role="button" class="button" value="bold"><i class="fas fa-bold"></i></a></li>
    <li><a role="button" class="button" value="italic"><i class="fas fa-italic"></i></a></li>
  </ul>
</div>

यदि आपके पास jQuery है (आपने अपने प्रश्न में टैग जोड़ा है) , तो आप यह कर सकते हैं:

window.onload = function() {
  $('.button').click(function() {
    var a = this.getAttribute('value');
    console.log(a);
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<div class="tool-top">
  <ul>
    <li><a role="button" class="button" value="bold"><i class="fas fa-bold"></i></a></li>
    <li><a role="button" class="button" value="italic"><i class="fas fa-italic"></i></a></li>
  </ul>
</div>