Como encontrar o ID do botão que está sendo clicado?
<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>
function reply_click()
{
}
Respostas:
Você precisa enviar o ID como os parâmetros de função. Faça isso deste modo:
<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>Isso enviará o ID this.idcomo o clicked_idqual você pode usar em sua função. Veja em ação aqui.
event.target.id(para mim, o Firefox e o IE estavam lançando), essa é uma ótima solução que funciona nos três principais navegadores.
Em geral, é mais fácil manter as coisas organizadas se você separar seu código e sua marcação. Defina todos os seus elementos e, na seção JavaScript, defina as várias ações que devem ser executadas nesses elementos.
Quando um manipulador de eventos é chamado, ele é chamado no contexto do elemento em que foi clicado. Então, o identificador esta fará referência ao elemento DOM que você clicou. Você pode acessar os atributos do elemento através desse identificador.
Por exemplo:
<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>USANDO O JAVASCRIPT PURO: Eu sei que é tarde, mas pode ser para as pessoas futuras que ele pode ajudar:
Na parte HTML:
<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>No Javascipt Controller:
function reply_click()
{
alert(event.srcElement.id);
}Dessa forma, não precisamos vincular o 'id' do elemento no momento da chamada da função javascript.
thiscomo parâmetro onClick( na verdade, não usando onClick, mas onChange, esse talvez seja o problema?). Eu também verifiquei um pouco e parece haver muita confusão sobre essa eventvariável - é um parâmetro "implícito" ou deve ser declarado explicitamente como argumento (ou seja function reply_click(event), que também vi em alguns locais)? Está disponível apenas ao atribuir o ouvinte de eventos via addEventListener...? Eu brinquei, mas não consegui fazê-lo funcionar.
(Acho que o idatributo precisa começar com uma letra. Pode estar errado.)
Você poderia ir para a delegação do evento ...
<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);
}
}... mas isso exige que você esteja relativamente confortável com o modelo de evento maluco.
eargumento é gerado automaticamente. Caso contrário, devemos lidar com o IE6-8, que fornece esse objeto útil via window.event.
geralmente é recomendável evitar o JavaScript embutido, mas raramente existe um exemplo de como fazê-lo.
Aqui está a minha maneira de anexar eventos aos botões.
Não estou totalmente satisfeito com quanto tempo o método recomendado é comparado a um onClickatributo simples .
<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>Você pode executar isso antes que o documento esteja pronto. Clicar nos botões funcionará porque anexamos o evento ao documento.
Aqui está um jsfiddle
Por algum motivo estranho, a insertHTMLfunção não funciona nela, mesmo que funcione em todos os meus navegadores.
Você sempre pode substituir insertHTMLpor document.writese não se importa com as desvantagens
<script>
document.write('<button class="click-me" id="btn1">Button 1</button>');
</script>Fontes:
Se você não deseja passar nenhum argumento para a função onclick, use event.targetpara obter o elemento clicado:
<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);
}Com o javascript puro, você pode fazer o seguinte:
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);
};
}verificá-lo em JsFiddle
Você pode simplesmente fazê-lo desta maneira:
<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;e apenas sealert(obj);
Desculpe, é uma resposta tardia, mas é muito rápida se você fizer isso: -
$(document).ready(function() {
$('button').on('click', function() {
alert (this.id);
});
});Isso obtém o ID de qualquer botão clicado.
Se você deseja obter apenas o valor do botão clicado em um determinado local, basta colocá-lo em um recipiente como
<div id = "myButtons"> buttons here </div>e altere o código para: -
$(document).ready(function() {
$('.myButtons button').on('click', function() {
alert (this.id);
});
});Eu espero que isso ajude
Isso registrará o ID do elemento que foi clicado: addFields.
<button id="addFields" onclick="addFields()">+</button>
<script>
function addFields(){
console.log(event.toElement.id)
}
</script>