Tıklanan düğmenin kimliğini nasıl bulurum?
<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>
function reply_click()
{
}
Yanıtlar:
Kimliği işlev parametreleri olarak göndermeniz gerekir. Şöyle yapın:
<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>Bu kimliği gönderecek this.idşekilde clicked_idFonksiyonunuzda kullanabilir. Burada çalışırken görün.
event.target.id(benim için, hem Firefox hem de IE fırlattı), bu üç büyük tarayıcıda çalışan harika bir çözümdür.
Genel olarak, kodunuzu ve işaretlemenizi ayırırsanız, işleri düzenli tutmak daha kolaydır. Tüm öğelerinizi tanımlayın ve ardından JavaScript bölümünüzde, bu öğeler üzerinde gerçekleştirilmesi gereken çeşitli işlemleri tanımlayın.
Bir olay işleyicisi çağrıldığında, tıklanan öğenin bağlamı içinde çağrılır. Yani, tanımlayıcı bu tıkladığınız o DOM öğesine sevk edecektir. Daha sonra öğenin özniteliklerine bu tanımlayıcı üzerinden erişebilirsiniz.
Örneğin:
<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>
SAF JAVASCRIPT KULLANMAK: Geç olduğunu biliyorum ama gelecekteki insanlar için yardımcı olabilir:
HTML bölümünde:
<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>
Javascipt Denetleyicisinde:
function reply_click()
{
alert(event.srcElement.id);
}Bu şekilde, javascript işlevini çağırırken Öğenin 'kimliğini' bağlamak zorunda değiliz.
thisparametre olarak geçerek etrafında çalıştı onClick(aslında, onClick kullanarak değil ama onChange, belki de bu sorun?). Ben de biraz etrafında kontrol ettik ve bu eventdeğişken dolaşan hakkında çok fazla karışıklık var gibi görünüyor - bu bir "örtük" parametre mi yoksa açıkça argüman olarak belirtilmesi gerekiyor mu (yani function reply_click(event), ben de gördüm bazı yerler)? Yalnızca olay dinleyicisini addEventListener... aracılığıyla atadığınızda kullanılabilir mi? Etrafımda oynadım, ama işe yaramadı.
(Sanırım idözelliğin bir harfle başlaması gerekiyor. Yanlış olabilir.)
Etkinlik heyetine gidebilirsiniz ...
<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);
}
}... ancak bu, tuhaf etkinlik modeliyle nispeten rahat olmanızı gerektirir.
eargüman otomatik olarak oluşturulur. Değilse, IE6-8 ile uğraşmalıyız, bunun yerine bu yararlı nesneyi sağlar window.event.
genellikle satır içi JavaScript'ten kaçınılması önerilir, ancak nadiren bunun nasıl yapılacağına dair bir örnek vardır.
Düğmelere olayları ekleme yolum.
Önerilen yöntemin basit bir onClicköznitelikle ne kadar daha uzun sürdüğünden tamamen memnun değilim .
<button class="btn">Button</button>
<script>
let OnEvent = (doc) => {
return {
on: (event, className, callback) => {
doc.addEventListener('click', (event)=>{
if(!event.target.classList.contains(className)) return;
callback.call(event.target, event);
}, false);
}
}
};
OnEvent(document).on('click', 'btn', function (e) {
window.console.log(this, e);
});
</script><!DOCTYPE html>
<html>
<head>
<script>
(function(doc){
var hasClass = function(el,className) {
return el.classList.contains(className);
}
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><!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>Bunu belge hazır olmadan önce çalıştırabilirsiniz, düğmeyi tıklatarak olayı belgeye eklediğimizden çalışır.
İşte bir jsfiddle
Tuhaf bir nedenden dolayı, insertHTMLtüm tarayıcılarımda çalışmasına rağmen işlev içinde çalışmıyor.
Her zaman yerini alabilir insertHTMLile document.writesize 's sakıncası yoksa sakıncaları
<script>
document.write('<button class="click-me" id="btn1">Button 1</button>');
</script>Kaynaklar:
Onclick işlevine herhangi bir argüman iletmek istemiyorsanız event.target, tıklanan öğeyi almak için kullanın :
<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);
}Saf javascript ile aşağıdakileri yapabilirsiniz:
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'da kontrol et
Bunu şu şekilde yapabilirsiniz:
<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);
}id=obj;sadece sahip olabilirsinizalert(obj);
Üzgünüm, geç bir cevap ama bunu yaparsanız gerçekten hızlı: -
$(document).ready(function() {
$('button').on('click', function() {
alert (this.id);
});
});Bu, tıklanan herhangi bir düğmenin kimliğini alır.
Belirli bir yerde tıklanan düğmenin değerini almak istiyorsanız, bunları
<div id = "myButtons"> buttons here </div>ve kodu şu şekilde değiştirin: -
$(document).ready(function() {
$('.myButtons button').on('click', function() {
alert (this.id);
});
});Umarım bu yardımcı olur
Bu, tıklanan öğenin kimliğini günlüğe kaydeder: addFields.
<button id="addFields" onclick="addFields()">+</button>
<script>
function addFields(){
console.log(event.toElement.id)
}
</script>