Dùng javascript để lấy dữ liệu từ html

e có 1 thẻ div như sau dùng để tính tổng giá trị của đơn hàng và giờ e muốn đổi nó ra thành USD thì viết đoạn script làm sao để lấy số tiền từ trong thẻ div này ra để tính được vậy ạ. Mong các tiền bối chỉ giáo ạ , e xin cám ơn.

<div class="payment-due-price" data-totalmoney="@Model.Sum(x => x.Product.Price * x.Quanlity)">
     @String.Format("{0:0,0₫}", Model.Sum(x => x.Product.Price * x.Quanlity))
</div>

Lấy nội dung trong thẻ <div> thông qua thuộc tính innerText khi dùng Javascript thuần hoặc method .text() trong jQuery là xong.

dom_el.innerText //JS thuần
jq_obj.text() //jQuery

https://www.w3schools.com/jsref/prop_node_innertext.asp

https://www.w3schools.com/jquery/html_text.asp

5 Likes

Lấy tag xong map qua dataset.totalMoney bạn :smiley: Mấy thuộc tính data này dùng để tách view với số.

6 Likes

dạ e có test thử một đoạn để xem innerText hoạt động ra sao mà hình như nó ko nhận được giá trị ạ

<button onclick="getInnerText()">Get innerText</button>
 <p id="demo"></p>
<script>
      function getInnerText() {
              alert(document.getElementById("demo").innerText)
       };
</script>

Trong thẻ p có gì đâu mà đòi hiện.

6 Likes

Ơ, có cái ếu gì đâu mà hiện, đọc kĩ code chưa đấy bạn. Cái thuộc tính innerText áp dụng cho tất cả các DOM element nha. Thuộc tính innerText dùng để lấy text của một DOM element (node) và của tất cả các element bên trong nó.

https://www.w3schools.com/jsref/prop_node_innertext.asp

4 Likes

Đọc cái này thấy hông biết chủ topic có đang phê cần/ hút hít có gì không nữa? Nếu có, tham gia hội thanh niên ngáo đá với bên mình nhé.

Luôn lưu ý là cần phải nạp DOM xong thì mới xử lý cho yên tâm hoặc dùng window.onload xem DOM đã về chưa.

Do đó, đoạn code trên nên được viết lại:

<p id="demo">Tui xuat hien khi bam nut</p>
<button onclick="getInnerText()">Bam phat</button>
<script>
      function getInnerText() {
              alert(document.getElementById("demo").innerText);
       };
</script>

Xong!

5 Likes

nó có thuộc tính này cho jquery nè :V lấy innerText làm gì

let totalmoney = $(".payment-due-price").eq(0).data("totalmoney");
7 Likes

Quên, không để ý innerText của thằng div bị format rồi :rofl:. Vì chủ thớt đang dùng JS thuần nên bổ sung theo cách JS thuần luôn:

//Dành riêng cho thuộc tính data (có dạng "data-aaa-bbb")
let totalmoney = $(".payment-due-price").eq(0).data("totalmoney");
let totalmoney = document.querySelector('.payment-due-price')[0].dataset.totalmoney; //Tương đương với cái trên

//Cách chung cho mọi loại thuộc tính:
let totalmoney = $(".payment-due-price").eq(0).attr("data-total-money");
let totalmoney = document.querySelector('.payment-due-price')[0].getAttribute("data-total-money"); //Tương đương với cái trên.
6 Likes

dạ vâng , e cám ơn anh và mọi người đã chỉ bảo ạ . công nhận là hôm qua e ngáo thật , copy code để chạy mà cũng copy thiếu nữa :sweat_smile:

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