Làm thế nào để tìm id của nút đang được nhấp?
<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>
function reply_click()
{
}
Câu trả lời:
Bạn cần gửi ID dưới dạng tham số chức năng. Làm như thế này:
<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>Điều này sẽ gửi ID this.idnhư clicked_idmà bạn có thể sử dụng trong các chức năng của bạn. Nhìn thấy nó trong hành động ở đây.
event.target.id(đối với tôi, cả Firefox và IE đều ném nó), đây là một giải pháp tuyệt vời hoạt động trong cả ba trình duyệt chính.
Nói chung, mọi thứ sẽ dễ dàng hơn để được tổ chức nếu bạn tách mã và đánh dấu của bạn. Xác định tất cả các yếu tố của bạn và sau đó trong phần JavaScript của bạn, xác định các hành động khác nhau cần được thực hiện trên các yếu tố đó.
Khi một trình xử lý sự kiện được gọi, nó được gọi trong ngữ cảnh của phần tử được nhấp vào. Vì vậy, định danh này sẽ đề cập đến phần tử DOM mà bạn đã nhấp vào. Sau đó, bạn có thể truy cập các thuộc tính của phần tử thông qua định danh đó.
Ví dụ:
<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>
SỬ DỤNG JREASCRIPT PURE: Tôi biết là muộn nhưng có thể là cho những người tương lai, nó có thể giúp:
Trong phần HTML:
<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>
Trong Bộ điều khiển Javascipt:
function reply_click()
{
alert(event.srcElement.id);
}
Bằng cách này, chúng ta không phải liên kết 'id' của Element tại thời điểm gọi hàm javascript.
thistham số vào onClick(thực ra, không sử dụng onClick mà là onChange, đó có phải là vấn đề không?). Tôi cũng đã kiểm tra xung quanh một chút và dường như có rất nhiều nhầm lẫn về eventbiến này xảy ra xung quanh - đó có phải là một tham số "ngầm" hay nó phải được nêu rõ ràng như là đối số (nghĩa là function reply_click(event)tôi cũng đã thấy trong một số địa điểm)? Có phải nó chỉ khả dụng khi gán người nghe sự kiện qua addEventListener...? Tôi đã chơi xung quanh, nhưng không thể làm cho nó hoạt động.
(Tôi nghĩ rằng idthuộc tính cần phải bắt đầu bằng một chữ cái. Có thể sai.)
Bạn có thể đi cho phái đoàn sự kiện ...
<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);
}
}
... nhưng điều đó đòi hỏi bạn phải tương đối thoải mái với mô hình sự kiện lập dị.
eđối số được tạo tự động. Nếu không, thì chúng ta phải xử lý IE6-8, thay vào đó cung cấp đối tượng hữu ích đó thông qua window.event.
nói chung nên tránh JavaScript nội tuyến, nhưng hiếm khi có một ví dụ về cách thực hiện.
Đây là cách của tôi để gắn các sự kiện vào các nút.
Tôi không hoàn toàn hài lòng với thời gian được đề xuất so với một onClickthuộc tính đơn giản .
<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>Bạn có thể chạy nó trước khi tài liệu sẵn sàng, nhấp vào nút sẽ hoạt động vì chúng tôi đính kèm sự kiện vào tài liệu.
Đây là một jsfiddle
Vì một số lý do kỳ lạ, insertHTMLchức năng này không hoạt động trong đó mặc dù nó hoạt động trong tất cả các trình duyệt của tôi.
Bạn luôn có thể thay thế insertHTMLvới document.writenếu bạn không nhớ nó nhược điểm
<script>
document.write('<button class="click-me" id="btn1">Button 1</button>');
</script>Nguồn:
Nếu bạn không muốn chuyển bất kỳ đối số nào cho hàm onclick, chỉ cần sử dụng event.targetđể lấy phần tử được nhấp:
<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);
}Với javascript thuần, bạn có thể làm như sau:
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);
};
}kiểm tra nó trên JsFiddle
Bạn chỉ có thể làm theo cách này:
<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;và chỉ cần cóalert(obj);
Xin lỗi, đây là câu trả lời muộn nhưng thực sự nhanh chóng nếu bạn làm điều này: -
$(document).ready(function() {
$('button').on('click', function() {
alert (this.id);
});
});Điều này nhận được ID của bất kỳ nút bấm.
Nếu bạn muốn nhận giá trị của nút được nhấp ở một nơi nhất định, chỉ cần đặt chúng vào thùng chứa như
<div id = "myButtons"> buttons here </div>và thay đổi mã thành: -
$(document).ready(function() {
$('.myButtons button').on('click', function() {
alert (this.id);
});
});Tôi hi vọng cái này giúp được
Điều này sẽ ghi lại id của phần tử được nhấp: addFields.
<button id="addFields" onclick="addFields()">+</button>
<script>
function addFields(){
console.log(event.toElement.id)
}
</script>