Lấy giá trị của một thẻ li hoặc span

#1

Mọi người cho mình hỏi mình có tạo 1 cái list gồm 3 dòng, giờ mình muốn lấy text của 1 dòng trong list khi mình click vào dòng đó thì mình phải làm sao ạ?
cảm ơn mọi người đã đọc câu hỏi

#2

Bạn có thể dùng JQuery nhé

<ul>
  <li id="li1">This is li 1</li>
  <li id="li2">This is li 2</li>
  <li id="li3">This is li 3</li>
</ul>

<script>
$("#li1").click(function(){
	alert($(this).html());
})
$("#li2").click(function(){
	alert($(this).html());
})
$("#li3").click(function(){
	alert($(this).html());
})
</script>

Demo

Update

<ul>
  <li>This is li 1</li>
  <li>This is li 2</li>
  <li>This is li 3</li>
</ul>

<script>
   $('ul').on('click', 'li', function(){
     alert($(this).html());
  });
</script>

Demo

#3

Giả sử có:

    <ol id="the_boc_ngoai">
        <li id="dong_1">Mục thứ nhât của tui</li>
        <li id="dong_2">Mục thứ hai của tui</li>
        <li id="dong_3">Mục thứ ba của tui</li>
        <li id="dong_4">Mục thứ tư của tui</li>
    </ol>

Thì lấy text của mục 2/ bất kỳ như sau:

var bien = document.getElementById("the_boc_ngoai");

function dong_nao(e) {
   alert(e.target.innerHTML);
}

bien.addEventListener("click", dong_nao, false);

Ví dụ trên là JavaScript thuần, thô thiển, cách cũ, cổ điển. Cách mới thì đọc tài liệu ES5 hoặc ES6. Nếu dùng các thư viện như jQuery, MooTools, PrototypeJs thì đơn giản hơn, đọc tài liệu của chúng là biết.

Xong!

P/S: ví dụ trên đã được sửa cho chạy, khác với ban đầu được viết mà chưa test => không chạy.

#4
  1. Không cần id tất cả các li đâu bạn
  2. chỉ cần 1 cái function thui.
$("ul li").click(){
       alert( $(this).html() );
}
1 Like
#5

có thể dùng cách nâng cao sau nếu thẻ li được add động như sau cũng được

$('ul').on('click', 'li', function(){
    alert($(this).html());
});

cần gì tới id và lặp code vậy đâu nhỉ

1 Like
#6

:smiley: mình cũng chỉ là gà mờ chia sẻ thôi các bác. Cảm ơn chỉ giáo

#7

mình làm theo cách 2 của bạn nhưng nó trả về giá trị underfined nghĩa là sao vậy bạn

#8

Cụ thể luôn nè, bạn xem ví dụ:

Nhớ là đoạn mình thích JavaScript thuần, vì mới học mà hướng dẫn jQuery thì sẽ dễ “làm hỏng” người học. Javascript bạn phải để sau thẻ HTML (tức là trước đấy nhé - không để trên phần head) không thì nó như bạn nói, xem ví dụ cụ thể bạn xem tại đây: https://jsfiddle.net/superthin/rx2ck96L/16/

2 Likes
#9

cảm ơn bạn… mình cũng đang học js thôi chứ chưa đụng tới jquery

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?