जावास्क्रिप्ट ऑनक्लिक ईवेंट

Question

में पैरामीटर पास करना मैं ऑनक्लिक ईवेंट में पैरामीटर पास करने का प्रयास कर रहा हूं। नीचे एक नमूना कोड है:

<div id="div"></div> 

<script language="javascript" type="text/javascript"> 
    var div = document.getElementById('div'); 

    for (var i = 0; i < 10; i++) { 
     var link = document.createElement('a'); 
     link.setAttribute('href', '#'); 
     link.innerHTML = i + ''; 
     link.onclick= function() { onClickLink(i+'');}; 
     div.appendChild(link); 
     div.appendChild(document.createElement('BR')); 
     } 

    function onClickLink(text) { 
     alert('Link ' + text + ' clicked'); 
     return false; 
     } 
    </script> 

हालांकि जब भी मैं लिंक चेतावनी हमेशा से पता चलता में से किसी पर क्लिक करें 'लिंक पर क्लिक किया 10'!

किसी को भी मुझे बता सकते हैं मैं गलत क्या कर रहा हूँ?

धन्यवाद

Answer 1

यह इसलिए होता है क्योंकि मैं गुंजाइश ऊपर से प्रसारित एक बार समारोह शुरू हो जाती है। आप एक बंद करने का उपयोग कर इस मुद्दे से बच सकते हैं।

for (var i = 0; i < 10; i++) { 
    var link = document.createElement('a'); 
    link.setAttribute('href', '#'); 
    link.innerHTML = i + ''; 
    link.onclick = (function() { 
     var currentI = i; 
     return function() { 
      onClickLink(currentI + ''); 
     } 
    })(); 
    div.appendChild(link); 
    div.appendChild(document.createElement('BR')); 
} 

या यदि आप अधिक संक्षिप्त वाक्य रचना चाहते हैं, मैं तुम्हें निक Craver के समाधान का उपयोग सुझाव देते हैं।

Answer 2

इस प्रयास करें:

<div id="div"></div> 

<script language="javascript" type="text/javascript"> 
    var div = document.getElementById('div'); 

    for (var i = 0; i < 10; i++) { 
     var f = function() { 
      var link = document.createElement('a'); 
      var j = i; // this j is scoped to our anonymous function 
         // while i is scoped outside the anonymous function, 
         // getting incremented by the for loop 
      link.setAttribute('href', '#'); 
      link.innerHTML = j + ''; 
      link.onclick= function() { onClickLink(j+'');}; 
      div.appendChild(link); 
      div.appendChild(document.createElement('br')); // lower case BR, please! 
     }(); // call the function immediately 
    } 

    function onClickLink(text) { 
     alert('Link ' + text + ' clicked'); 
     return false; 
    } 
</script> 

Answer 3

link.onclick = function() { onClickLink(i+''); }; 

एक बंद है और मूल्य है कि i रखती है जब समारोह बनाई गई है चर i के लिए एक संदर्भ, नहीं संग्रहीत करता है। एक समाधान एक समारोह में for पाश की सामग्री को ऐसा करने रैप करने के लिए होगा:

for (var i = 0; i < 10; i++) (function(i) { 
    var link = document.createElement('a'); 
    link.setAttribute('href', '#'); 
    link.innerHTML = i + ''; 
    link.onclick= function() { onClickLink(i+'');}; 
    div.appendChild(link); 
    div.appendChild(document.createElement('BR')); 
}(i)); 

Answer 4

इसका कारण यह है कि वे सभी एक ही i चर, जो हर पाश बदल रहा है को संदर्भित कर रहे हो रहा है, और के रूप में छोड़ दिया लूप के अंत में 10। ,

link.onclick = function(j) { return function() { onClickLink(j+''); }; }(i); 

You can give it a try here

या this बनाने के लिंक आपको लगता है कि हैंडलर में क्लिक किया है, इस तरह: आप इस प्रकार का बंद का उपयोग कर इसे हल कर सकते हैं

link.onclick = function(j) { return function() { onClickLink.call(this, j); }; }(i); 

You can try that version here

Answer 5

या आप इस लाइन का उपयोग कर सकते हैं:

link.setAttribute('onClick', 'onClickLink('+i+')'); 

इस एक के बजाय:

link.onclick= function() { onClickLink(i+'');}; 

Answer 6

एक और आसान तरीका (सबसे अच्छा अभ्यास नहीं हो सकता है), लेकिन आकर्षण की तरह काम करता है। जावास्क्रिप्ट के साथ गतिशील रूप से अपने तत्व (हाइपरलिंक या बटन) का HTML टैग बनाएं, और कई पैरामीटर भी पास कर सकते हैं।

// variable to hold the HTML Tags 
var ProductButtonsHTML =""; 

//Run your loop 
for (var i = 0; i < ProductsJson.length; i++){ 
// Build the <input> Tag with the required parameters for Onclick call. Use double quotes. 

ProductButtonsHTML += " <input type='button' value='" + ProductsJson[i].DisplayName + "' 
onclick = \"BuildCartById('" + ProductsJson[i].SKU+ "'," + ProductsJson[i].Id + ")\"></input> "; 

} 

// Add the Tags to the Div's innerHTML. 
document.getElementById("divProductsMenuStrip").innerHTML = ProductButtonsHTML; 

Answer 7

यह एक समर्पित समारोह ताकि आप दो अनाम प्रक्रियाएं बनाने से बच सकते हैं लिंक बनाने के लिए बनाने के लिए शायद बेहतर है। इस प्रकार:

<div id="div"></div> 

<script> 
    function getLink(id) 
    { 
    var link = document.createElement('a'); 
    link.setAttribute('href', '#'); 
    link.innerHTML = id; 
    link.onclick = function() 
    { 
     onClickLink(id); 
    }; 
    link.style.display = 'block'; 
    return link; 
    } 
    var div = document.getElementById('div'); 
    for (var i = 0; i < 10; i += 1) 
    { 
    div.appendChild(getLink(i.toString())); 
    } 
</script> 

हालांकि दोनों ही मामलों आप दो कार्यों के साथ अंत में, मैं सिर्फ लगता है कि यह एक समारोह है कि अर्थ की दृष्टि से समझने के लिए आसान में लपेट के लिए बेहतर है।

Answer 8

ऑनक्लिक बनाम addEventListener। वरीयता का मामला शायद (जहां आईई> 9)।

// Using closures 
function onClickLink(e, index) { 
    alert(index); 
    return false; 
} 

var div = document.getElementById('div'); 

for (var i = 0; i < 10; i++) { 
    var link = document.createElement('a'); 

    link.setAttribute('href', '#'); 
    link.innerHTML = i + ''; 
    link.addEventListener('click', (function(e) { 
     var index = i; 
     return function(e) { 
      return onClickLink(e, index); 
     } 
    })(), false); 
    div.appendChild(link); 
    div.appendChild(document.createElement('BR')); 
} 

कैसे सिर्फ एक सादे का उपयोग कर abut डेटा- * विशेषता, एक बंद के रूप में के रूप में अच्छा नहीं है, लेकिन ..

function onClickLink(e) {  
    alert(e.target.getAttribute('data-index')); 
    return false; 
} 

var div = document.getElementById('div'); 

for (var i = 0; i < 10; i++) { 
    var link = document.createElement('a'); 

    link.setAttribute('href', '#'); 
    link.setAttribute('data-index', i); 
    link.innerHTML = i + ' Hello';   
    link.addEventListener('click', onClickLink, false); 
    div.appendChild(link); 
    div.appendChild(document.createElement('BR')); 
}