programming python

Python trên sự kiện nhấp chuột

Lý do. tất cả các menu của bạn có cùng một id. Bạn có thể sử dụng id của menu để cung cấp cho mỗi người một id duy nhất, bằng cách nối thêm


  
freeCodeCamp

  Change to Blue
4 vào thuộc tính id trong html của bạn. 
    

     {% if allmenu %} {% for menu in allmenu %} 
    

    

    

    
{{menu.price}} only

    
    

    
{{menu.food_name}}

    
{{menu.food_description}}

    Place Order
    

    

    {% endfor %} {% else %}
    

    
No Food

    

      {% endif %}

Sau đó, bạn có thể nhắm mục tiêu những mục tiêu này riêng lẻ trong javascript của mình như thế này

    function myFunction[id] {
    var price = document.getElementById["price" + id];
    var food = document.getElementById["foodName_1" + id];
    console.log[food];
    console.log[price];
   }

đã trả lời vào ngày 16 tháng 1 lúc 14. 18 16 tháng 1 lúc 14. 18

raphaelraphael raphael

1.8642 huy hiệu vàng6 huy hiệu bạc17 huy hiệu đồng2 huy hiệu vàng6 huy hiệu bạc17 huy hiệu đồng

13

Tôi nghĩ rằng lý tưởng nhất là tạo một chế độ xem chấp nhận một tham số mà bạn có thể xác định đối tượng của mình, một ví dụ sẽ là

def vote_site_view[request, slug_name]:
    with transaction.atomic[]:
        site = Site.objects.select_for_update[skip_locked=True].filter[
            slug_name=slug_name, deleted=False
        ]
        site.update[votes=F["votes"] + 1]
    return JsonResponse[{"message": "ok"}, status=200]

Trong HTML

Cuối cùng trong tệp Js của bạn

function voteSite[slug_name] {
  let url = `${window.location.origin}/vote/${slug_name}/`;
  fetch[url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
  }]
    .then[[response] => {
      alert[response.data.message];
    }];
}

đã trả lời ngày 4 tháng 8 lúc 20. 23 4 tháng 8 lúc 20. 23

Bất cứ khi nào bạn truy cập vào một trang web, có thể bạn sẽ nhấp vào một cái gì đó như liên kết hoặc nút

Nội dung chính Hiển thị Hiển thị

  • Cách sử dụng sự kiện freeCodeCamp Change to Blue 4 trong JavaScript
  • Cú pháp cơ bản freeCodeCamp Change to Blue 4
  • freeCodeCamp Change to Blue 4 Ví dụ sự kiện
  • Cách sử dụng nhấp freeCodeCamp Thay đổi thành Blue 9 trong JavaScript
  • Cú pháp cơ bản freeCodeCamp Thay đổi thành Blue 9
  • Cách xây dựng nút "Hiển thị thêm" và "Hiển thị ít hơn" với Javascrpit
  • Kết luận
  • Làm thế nào Onclick hoạt động trong JavaScript?
  • Làm thế nào để bạn nhấp vào một sự kiện trong JavaScript?
  • Việc sử dụng sự kiện title là gì?
  • Tại sao chúng ta sử dụng Onclick trong JavaScript?

Liên kết đưa bạn đến một phần nhất định của trang, một trang khác của trang web hoặc một trang web hoàn toàn khác. Mặt khác, các nút thường được thao tác bởi các sự kiện JavaScript để chúng có thể kích hoạt một số chức năng nhất định

Trong hướng dẫn này, chúng tôi sẽ khám phá hai cách khác nhau để thực hiện các sự kiện nhấp vào JavaScript bằng hai phương thức khác nhau

Đầu tiên, chúng tôi sẽ xem xét các loại


  
freeCodeCamp

  Change to Blue
4 truyền hệ thống mà bạn làm ngay từ trang HTML. Sau đó, chúng ta sẽ xem cách "nhấp chuột" hiện đại hơn

  
freeCodeCamp

  Change to Blue
5 hoạt động, cho phép bạn tách HTML khỏi JavaScript

Cách sử dụng sự kiện freeCodeCamp Change to Blue 4 trong JavaScript

Event


  
freeCodeCamp

  Change to Blue
4 thực hiện chức năng định trước khi nhấp vào nút. Điều này có thể là khi người dùng gửi biểu mẫu, khi bạn thay đổi một số nội dung nhất định trên trang web và những thứ khác như thế

Bạn đã đặt chức năng JavaScript mà bạn muốn thực thi bên trong thẻ mở của nút

Cú pháp cơ bản freeCodeCamp Change to Blue 4

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
0

Ví dụ

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
1

Lưu ý rằng thuộc tính


  
freeCodeCamp

  Change to Blue
4 hoàn toàn là JavaScript. Giá trị của nó, đó là hàm bạn muốn thực hiện, nói tất cả, vì nó được gọi ngay trong thẻ mở

Trong JavaScript, bạn gọi một hàm bằng cách gọi tên của nó, sau đó bạn đặt dấu ngoặc đơn sau khi nhận dạng hàm [tên]

freeCodeCamp Change to Blue 4 Ví dụ sự kiện

Tôi đã chuẩn bị sẵn một số cơ bản HTML với một chút phong cách để chúng tôi có thể đưa ra sự kiện


  
freeCodeCamp

  Change to Blue
4 vào thực tiễn trong thế giới thực. 

  
freeCodeCamp

  Change to Blue

Và đây là CSS để làm cho nó trông đẹp hơn, cùng với tất cả các phần còn lại của ví dụ mã

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
5

Vì vậy, trên trang web, đây là những gì chúng tôi có

Mục đích của chúng tôi là thay đổi màu của văn bản thành màu xanh khi chúng tôi nhấp vào nút. Vì vậy, chúng tôi cần thêm một thuộc tính


  
freeCodeCamp

  Change to Blue
4 vào nút của chúng tôi, sau đó viết hàm JavaScript để thay đổi màu sắc

Vì vậy, chúng ta cần tạo ra một thay đổi nhỏ trong HTML của mình

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
7

Hàm chúng tôi muốn thực hiện là

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
53. Vì vậy, chúng ta cần viết nó trong tệp JavaScript hoặc trong tệp HTML bên trong thẻ
    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
54

Nếu bạn muốn viết lệnh của mình vào tệp JavaScript, bạn cần liên kết nó trong HTML bằng cú pháp dưới đây

    

     {% if allmenu %} {% for menu in allmenu %} 
    

    

    

    
{{menu.price}} only

    
    

    
{{menu.food_name}}

    
{{menu.food_description}}

    Place Order
    

    

    {% endfor %} {% else %}
    

    
No Food

    

      {% endif %}
0

Nếu bạn muốn viết lệnh vào tệp HTML, chỉ cần đặt nó vào trong thẻ lệnh

    

     {% if allmenu %} {% for menu in allmenu %} 
    

    

    

    
{{menu.price}} only

    
    

    
{{menu.food_name}}

    
{{menu.food_description}}

    Place Order
    

    

    {% endfor %} {% else %}
    

    
No Food

    

      {% endif %}
1

Bây giờ, hãy để chức năng viết

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
53 của chúng tôi

Trước hết, chúng ta cần chọn phần tử chúng ta muốn thao tác, đó là văn bản Freecodecamp bên trong thẻ

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
56

Trong JavaScript, bạn làm điều đó với các phương thức DOM Lừa ____37,

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
58 hoặc
    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
59. Sau đó, bạn lưu trữ giá trị trong một biến

Trong hướng dẫn này, tôi sẽ sử dụng

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
59 vì nó hiện đại hơn và nó nhanh hơn. Tôi cũng sẽ sử dụng
    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
71 để khai báo các biến của chúng tôi thay vì
    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
72 và
    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
73, bởi vì với
    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
71, mọi thứ sẽ an toàn hơn khi các biến trở nên chỉ đọc. 
    function myFunction[id] {
    var price = document.getElementById["price" + id];
    var food = document.getElementById["foodName_1" + id];
    console.log[food];
    console.log[price];
   }
1

Bây giờ chúng tôi đã chọn văn bản, hãy viết chức năng của chúng tôi. Trong JavaScript, cú pháp chức năng cơ bản trông như thế này

    function myFunction[id] {
    var price = document.getElementById["price" + id];
    var food = document.getElementById["foodName_1" + id];
    console.log[food];
    console.log[price];
   }
2

Vì vậy, hãy viết chức năng của chúng tôi

    function myFunction[id] {
    var price = document.getElementById["price" + id];
    var food = document.getElementById["foodName_1" + id];
    console.log[food];
    console.log[price];
   }
3

Chuyện gì đang xảy ra vậy?

Hãy ghi nhớ từ HTML rằng

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
53 là chức năng mà chúng ta sẽ thực hiện. Đó là lý do tại sao chức năng định danh của chúng tôi [tên] được đặt thành
    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
76. Nếu cái tên này không tương thích với những gì mà trong HTML, thì nó đã đạt được thành công

Trong mô hình DOM [tài liệu mô hình đối tượng, chủ đề cập nhật cho tất cả các HTML], để thay đổi bất kỳ điều gì liên quan đến phong cách, bạn cần phải viết phong cách của Hồi giáo sau đó là một dấu chấm [. ]. Tiếp theo là những gì bạn muốn thay đổi, có thể là màu sắc, màu da nền, kích thước phông chữ, v. v

Vì vậy, bên trong chức năng của chúng tôi, chúng tôi lấy tên biến mà chúng tôi đã tuyên bố để lấy văn bản Freecodecamp của chúng tôi, sau đó chúng tôi thay đổi màu sang màu xanh

Màu sắc của văn bản của chúng tôi chuyển sang màu xanh bất cứ khi nút nào được nhấp

Mã của chúng tôi đang hoạt động

Chúng ta có thể đưa mọi thứ đi xa hơn một chút bằng cách thay đổi văn bản của chúng ta thành nhiều màu sắc hơn

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
10

Vì vậy, những gì chúng tôi muốn làm là thay đổi văn bản thành màu xanh lam, xanh lá cây và màu đỏ cam

This times, functions


  
freeCodeCamp

  Change to Blue
4 trong HTML của chúng tôi, tôi lấy giá trị của màu sắc mà chúng tôi muốn thay đổi văn bản thành. Chúng được gọi là tham số trong JavaScript. Chức năng chúng ta sẽ viết cũng có thể tự mình thực hiện, mà chúng ta sẽ gọi là Color Color

Trang web của chúng tôi đã thay đổi một chút

Vì vậy, hãy chọn văn bản Freecodecamp của chúng tôi và viết chức năng để thay đổi màu sắc của nó thành màu xanh lam, xanh lá cây và màu đỏ cam

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
11

Khối mã trong hàm lấy tên biến [trong đó chúng tôi lưu trữ văn bản freecodecamp của chúng tôi], sau đó đặt màu cho bất kỳ điều gì chúng tôi chuyển vào các hàm

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
53 trong các nút HTML

Cách sử dụng nhấp freeCodeCamp Thay đổi thành Blue 9 trong JavaScript

Trong JavaScript, có nhiều cách để làm điều tương tự. Khi JavaScript chính phát triển theo thời gian, chúng tôi bắt đầu cần tách mã HTML, CSS và JavaScript để thu hút các thành viên tốt nhất

Người nghe sự kiện làm điều này có thể khi họ cho phép bạn tách JavaScript khỏi HTML. Bạn cũng có thể làm điều này với Onclick, nhưng hãy thực hiện một cách tiếp cận khác ở đây

Cú pháp cơ bản freeCodeCamp Thay đổi thành Blue 9

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
12

Bây giờ, hãy thay đổi văn bản Freecodecampt thành màu xanh bằng cách sử dụng Click EventListner

Đây là HTML mới của chúng tôi

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
13

Và đây là những gì nó trông giống như

Lần này trong tập lệnh của chúng tôi, chúng tôi cũng cần chọn nút [không chỉ văn bản Freecodecamp]. Điều đó bởi vì không có gì JavaScript trong thẻ mở của nút của chúng tôi, thật tuyệt vời

Vì vậy, kịch bản của chúng tôi trông giống như thế này

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
14

Chúng tôi cũng có thể phân tách chức năng của mình hoàn toàn khỏi

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
79 và chức năng của chúng tôi sẽ vẫn giữ nguyên. 
    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
15

Cách xây dựng nút "Hiển thị thêm" và "Hiển thị ít hơn" với Javascrpit

Một trong những cách tốt nhất để học tập là bằng cách thực hiện các dự án, vì vậy hãy lấy những gì chúng ta đã học về


  
freeCodeCamp

  Change to Blue
4 và "click"_______05 để xây dựng một cái gì đó

Khi bạn truy cập một blog, bạn thường thấy các đoạn trích dẫn của các bài báo trước đó. Sau đó, bạn có thể nhấp vào nút "Đọc thêm" để hiển thị phần còn lại. Hãy cố gắng làm điều đó

Đây là HTML mà chúng tôi đang đối phó

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
16

Nó có HTML đơn giản với một số sự thật về Freecodecamp. Và có một nút chúng tôi đã đính kèm


  
freeCodeCamp

  Change to Blue
4 vào. Hàm chúng tôi muốn thực thi là
    

     {% if allmenu %} {% for menu in allmenu %} 
    

    

    

    
{{menu.price}} only

    
    

    
{{menu.food_name}}

    
{{menu.food_description}}

    Place Order
    

    

    {% endfor %} {% else %}
    

    
No Food

    

      {% endif %}
05, chúng tôi sẽ viết sớm

Không có CSS, đây là những gì chúng ta có

Nó không siêu xấu, nhưng chúng ta có thể làm cho nó trông đẹp hơn và hành động theo cách chúng ta muốn. Vì vậy, chúng tôi có một số CSS mà tôi sẽ giải thích dưới đây

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
17

CSS đang làm gì?

Với bộ lựa chọn phổ [

    

     {% if allmenu %} {% for menu in allmenu %} 
    

    

    

    
{{menu.price}} only

    
    

    
{{menu.food_name}}

    
{{menu.food_description}}

    Place Order
    

    

    {% endfor %} {% else %}
    

    
No Food

    

      {% endif %}
0 6], chúng tôi đang loại bỏ lề và đệm mặc định được gán cho các phần tử để chúng tôi có thể thêm lề và đệm của riêng mình

Chúng tôi cũng có hộp kích thước được đặt thành hộp biên để chúng tôi có thể bao gồm phần đệm và biên giới trong các yếu tố thành phần của chúng tôi Tổng chiều rộng và chiều cao của chúng tôi

Chúng tôi tập trung mọi thứ trong cơ thể với Flexbox và cho nó nền màu xám nhạt

Elemental section

________ 107 của chúng tôi, chứa văn bản, có chiều rộng ________ 108, nền trắng [#FFF] và có đệm 20px ở phía trên, 20 ở bên trái và bên phải và 0 ở phía dưới

Đoạn thẻ bên trong nó có kích thước phông chữ chữ 18px, và sau đó chúng tôi cho chúng tôi chiều cao tối đa là

    

     {% if allmenu %} {% for menu in allmenu %} 
    

    

    

    
{{menu.price}} only

    
    

    
{{menu.food_name}}

    
{{menu.food_description}}

    Place Order
    

    

    {% endfor %} {% else %}
    

    
No Food

    

      {% endif %}
09. Do chiều cao tối đa của các yếu tố thành phần bài viết, tất cả các văn bản sẽ không được chứa và sẽ tràn. Để giải quyết vấn đề này, chúng tôi đã đặt tràn để ẩn để không hiển thị văn bản lúc đầu

Thuộc tính chuyển tiếp chắc chắn rằng mọi thay đổi xảy ra sau 1 giây. Tất cả các văn bản bên trong

    

     {% if allmenu %} {% for menu in allmenu %} 
    

    

    

    
{{menu.price}} only

    
    

    
{{menu.food_name}}

    
{{menu.food_description}}

    Place Order
    

    

    {% endfor %} {% else %}
    

    
No Food

    

      {% endif %}
10 đều hợp lý và có phần trên cùng là 20 pixel để nó không gắn với đầu trang

Bởi vì chúng tôi đã loại bỏ biên độ mặc định, các đoạn văn của chúng tôi đã cùng nhau. Vì vậy, chúng tôi đặt biên độ dưới cùng là 16 pixel để tách chúng ra khỏi nhau

Bộ lựa chọn của chúng tôi,

    

     {% if allmenu %} {% for menu in allmenu %} 
    

    

    

    
{{menu.price}} only

    
    

    
{{menu.food_name}}

    
{{menu.food_description}}

    Place Order
    

    

    {% endfor %} {% else %}
    

    
No Food

    

      {% endif %}
11, has an thuộc tính
    

     {% if allmenu %} {% for menu in allmenu %} 
    

    

    

    
{{menu.price}} only

    
    

    
{{menu.food_name}}

    
{{menu.food_description}}

    Place Order
    

    

    {% endfor %} {% else %}
    

    
No Food

    

      {% endif %}
12 được đặt thành
    

     {% if allmenu %} {% for menu in allmenu %} 
    

    

    

    
{{menu.price}} only

    
    

    
{{menu.food_name}}

    
{{menu.food_description}}

    Place Order
    

    

    {% endfor %} {% else %}
    

    
No Food

  



    

      {% endif %}
13. Điều này có nghĩa là bất cứ khi nào phần tử bài viết có lớp
    

     {% if allmenu %} {% for menu in allmenu %} 
    

    

    

    
{{menu.price}} only

    
    

    
{{menu.food_name}}

    
{{menu.food_description}}

    Place Order
    

    

    {% endfor %} {% else %}
    

    
No Food

    

      {% endif %}
14 được gắn vào nó, chiều cao tối đa sẽ thay đổi từ
    

     {% if allmenu %} {% for menu in allmenu %} 
    

    

    

    
{{menu.price}} only

    
    

    
{{menu.food_name}}

    
{{menu.food_description}}

    Place Order
    

    

    {% endfor %} {% else %}
    

    
No Food

    

      {% endif %}
09 thành
    

     {% if allmenu %} {% for menu in allmenu %} 
    

    

    

    
{{menu.price}} only

    
    

    
{{menu.food_name}}

    
{{menu.food_description}}

    Place Order
    

    

    {% endfor %} {% else %}
    

    
No Food

    

      {% endif %}
13 để hiển thị phần còn lại của bài viết. Điều này có thể xảy ra với JavaScript - người thay đổi trò chơi của chúng tôi

Chúng tôi tạo kiểu cho nút của chúng tôi với nền tối và làm cho nó có màu trắng. Chúng tôi đặt đường viền của nó thành không có ai để loại bỏ đường viền mặc định HTML trên các nút và chúng tôi đã cho nó bán kính biên giới là

    

     {% if allmenu %} {% for menu in allmenu %} 
    

    

    

    
{{menu.price}} only

    
    

    
{{menu.food_name}}

    
{{menu.food_description}}

    Place Order
    

    

    {% endfor %} {% else %}
    

    
No Food

    

      {% endif %}
17 để nó có đường viền hơi tròn

Cuối cùng, chúng tôi đã sử dụng lớp giả giả trong CSS để thay đổi nút con trỏ thành con trỏ. Màu nền thay đổi một chút khi người dùng di chuyển con trỏ của họ trên đó

Ở đó chúng tôi đi - đó là CSS

Trang của chúng tôi bây giờ trông đẹp hơn

Điều tiếp theo chúng ta cần làm là viết JavaScript của mình để chúng ta có thể thấy phần còn lại của bài viết đã bị ẩn

We are property


  
freeCodeCamp

  Change to Blue
4 bên trong thẻ mở nút của chúng tôi đã sẵn sàng để thực hiện chức năng thi
    

     {% if allmenu %} {% for menu in allmenu %} 
    

    

    

    
{{menu.price}} only

    
    

    
{{menu.food_name}}

    
{{menu.food_description}}

    Place Order
    

    

    {% endfor %} {% else %}
    

    
No Food

    

      {% endif %}
05, vì vậy hãy viết chức năng

Chúng tôi cần chọn bài viết trước của mình, bởi vì chúng tôi phải hiển thị phần còn lại của nó

    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
18

Điều tiếp theo chúng ta cần làm là viết hàm

    

     {% if allmenu %} {% for menu in allmenu %} 
    

    

    

    
{{menu.price}} only

    
    

    
{{menu.food_name}}

    
{{menu.food_description}}

    Place Order
    

    

    {% endfor %} {% else %}
    

    
No Food

    

      {% endif %}
05 để chúng ta có thể chuyển đổi giữa việc nhìn thấy phần còn lại của bài viết và ẩn nó đi. 
    function myFunction[] {
    var price = document.getElementById["price"];
    var food = document.getElementById["foodName_1"];
    console.log[food];
    console.log[price];
   }
19

Chức năng đang làm gì?

Chúng tôi sử dụng một tuyên bố

    function myFunction[id] {
    var price = document.getElementById["price" + id];
    var food = document.getElementById["foodName_1" + id];
    console.log[food];
    console.log[price];
   }
1 2 ở đây. Đây là một phần quan trọng của JavaScript giúp bạn đưa ra quyết định trong mã của mình nếu điều kiện tốt nhất được giải đáp

Cú pháp cơ bản trông như thế này


  
freeCodeCamp

  Change to Blue
0

Tại đây, nếu tên lớp của bài viết bằng mở [nghĩa là chúng tôi muốn thêm lớp mở vào nó, được đặt thành chiều cao tối đa là 1000px trong CSS], thì chúng tôi muốn xem phần còn lại của bài viết. Ngoài ra, chúng tôi muốn bài viết trở lại trạng thái ban đầu nơi một phần của nó được ẩn

Chúng tôi làm điều này bằng cách gán cho nó một lớp mở trong các khối khác, điều này làm cho nó hiển thị phần còn lại của bài viết. Sau đó, chúng tôi đặt lớp thành một chuỗi trống [không có] trong khối IF, khiến nó trở lại trạng thái ban đầu

Mã của chúng tôi hoạt động tốt với quá trình chuyển đổi phần mềm

Chúng ta có thể tách HTML và JavaScript và vẫn sử dụng được


  
freeCodeCamp

  Change to Blue
4, vì Onclick là JavaScript. Vì vậy, có thể viết điều này trong tệp JavaScript thay vì bắt đầu từ HTML. 

  
freeCodeCamp

  Change to Blue
1

Chúng ta cũng có thể làm điều này bằng cách sử dụng EventListner


  
freeCodeCamp

  Change to Blue
2____03

Chức năng của chúng tôi vẫn giữ nguyên

Kết luận

Tôi hy vọng hướng dẫn này sẽ giúp bạn hiểu cách điều kiện nhấp chuột hoạt động trong JavaScript. Chúng tôi đã khám phá ra hai phương pháp khác nhau ở đây, vì vậy bây giờ bạn có thể bắt đầu sử dụng chúng trong các dự án mã hóa của mình

Cảm ơn bạn đã đọc và tiếp tục mã hóa

Học mã miễn phí. Chương trình giảng dạy nguồn mở của Freecodecamp đã giúp hơn 40. 000 người được làm việc với tư cách là nhà phát triển. Start

Bài Viết Liên Quan

Where is the Super Bowl in 2023 going to be held?
Tự c++
Tổng các số không nguyên tố trong chuyên gia gán python
Khởi động lại chương trình python
Chuyển đổi foot sang mét javascript
Kia Sportage 2023 có tăng áp không?
Dự án sổ liên lạc trong python
Api mysql
Cách thêm video vào wordpress
So sánh Kia Telluride 2022 và 2023
Cắt lát trong ví dụ Python
Làm cách nào để kiểm tra URL hình ảnh có hợp lệ trong PHP không?
Tính phần trăm của một tổng trong excel
Định nghĩa bootstrapping
Dấu nháy đơn trong Python
Phạm vi thống kê trăn
Chỗ ở Hoylake Open 2023
Làm cách nào để bạn trích xuất văn bản từ hình ảnh bằng công cụ tesseract ocr và python?
Khóa học lập trình python hà nội
Lưu kết quả vào tệp văn bản python

Toplist mới

#1
Top 4 uống nước chanh sả mật ong có tác dụng gì 2023
7 tháng trước
#2
Top 10 bài tập làm văn số 5 lớp 7 de 4 2023
7 tháng trước
#3
Top 3 vừa chơi đã có tài khoản vương giả chap 1 2023
7 tháng trước
#4
Top 6 anh sẽ on thôi cover phạm nguyên ngọc lyrics 2023
7 tháng trước
#5
Top 7 tài liệu quản lý nhà nước và quản lý ngành giáo dục đào tạo 2023
7 tháng trước
#6
Top 7 hãy ra khỏi người đó đi hợp âm 2023
7 tháng trước
#7
Top 6 giáo án thơ về thăm nhà bác 2023
7 tháng trước
#8
Top 8 giáo án ngữ văn 6 cánh diều 2023
7 tháng trước
#9
Top 9 tinh bột tham gia phản ứng nào 2023
7 tháng trước

Bài mới nhất

Bảo quản nào tham gia quá trình tổng hợp protein năm 2024
1 biên bản điều chỉnh cho mấy hóa đơn năm 2024
Tiêm vitamin k cho trẻ sơ sinh khi nào năm 2024
131 lê văn việt q9 cam do 24h năm 2024
Bài 18 trinh bày văn bản khi in năm 2024
Top game nhẹ cho laptop cấu hình yếu năm 2024
Top 10 nhân vật mạnh nhất trong fairy tail năm 2024
Quy định về sửa đổi bổ sung văn bản năm 2024
Khu đô thị ciputra đường phạm văn đồng năm 2024
Cách viết mũi tên phương trình hóa học trong word năm 2024

Chủ Đề

programming Hỏi Đáp Mẹo Hay Toplist Là gì Địa Điểm Hay mẹo hay Học Tốt Công Nghệ Nghĩa của từ Khỏe Đẹp Bao nhiêu đánh giá Top List bao nhieu bao nhiêu hướng dẫn Bài tập So Sánh Tiếng anh So sánh Xây Đựng Sản phẩm tốt Ngôn ngữ Bài Tập Máy tính javascript Ở đâu Thế nào Hướng dẫn Dịch Tại sao Đại học Món Ngon Facebook Khoa Học