Nút tăng trong HTML

Cách đơn giản nhất để làm điều này là thêm trình xử lý sự kiện vào nút, để tăng số lượng truy cập trong JavaScript

JavaScript tăng một ví dụ về bộ đếm

Mã ví dụ HTML với 'Plain' JavaScript. -

1. Giá trị biến số tăng

Tạo một biến JavaScript và tăng biến đó khi nhấn nút [không gửi biểu mẫu]

phản ví dụ. cách tăng biến JavaScript dựa trên sự kiện nhấn nút trang web

    
        var counter = 0;
        function increment[]{
            counter++;
            console.log[counter];
        }
    



  

đầu ra

2. Tăng giá trị phần tử

Hãy tạo một biến đếm tăng giá trị khi bạn nhấp vào nút. Chúng tôi đang sử dụng hai yếu tố trong HTML

Văn bản đầu tiên và nút id thứ hai, khi nhấp vào nút nhập văn bản sẽ tăng giá trị hiện tại lên một

    
     
     
 

 
    function incrementValue[]
    {
        var value = parseInt[document.getElementById['number'].value, 10];
        value = isNaN[value] ? 0 : value;
        value++;
        document.getElementById['number'].value = value;
    }

đầu ra

Hãy bình luận nếu bạn có bất kỳ nghi ngờ và gợi ý nào về chủ đề này

Ghi chú. Tất cả mã Ví dụ về JS đều được thử nghiệm trên trình duyệt Firefox và trình duyệt Chrome

hệ điều hành. cửa sổ 10

Mã số. Phiên bản HTML5

Rohit

Bằng cấp về Khoa học Máy tính và Kỹ sư. Nhà phát triển ứng dụng và có kinh nghiệm về nhiều ngôn ngữ lập trình. Đam mê công nghệ & thích học hỏi kỹ thuật

Nhập văn bản trên biểu mẫu có thể được sử dụng để gửi số. Một cách sử dụng phổ biến sẽ là đầu vào "số lượng" trên trang web Thương mại điện tử. Thay đổi giá trị số lượng, theo quan điểm của người dùng, đòi hỏi phải lập tab hoặc nhấp vào đầu vào, xóa nội dung hiện tại và nhập giá trị mới. Dự kiến ​​hành vi mà không ai sẽ la mắng bạn, nhưng những con số đầu vào này có thể thân thiện hơn một chút. Thông qua việc sử dụng JavaScript [vâng, jQuery], hãy làm điều đó

HTML sạch

Đây là đánh dấu biểu mẫu. Không có gì thêm vào, chỉ cần HTML sạch. Không có JavaScript, biểu mẫu này sẽ hoạt động hoàn hảo và không có bất kỳ thứ gì không liên quan

    

        French Hens
        
    
    

        Turtle Doves
        
    
    

        Partridges
        
    
    
    

CSS…

… không thú vị lắm. Có lẽ một vài điều cần lưu ý. Mọi thứ được thả nổi bên trái và DIV đã ẩn phần tràn để xóa số float. Các nhãn là khối hiển thị và căn chỉnh văn bản bên phải để lưới hoạt động. Điều chỉnh pixel được thực hiện ở đây và ở đó để sắp xếp mọi thứ phù hợp. Tôi đã không dành nhiều thời gian cho việc này, vì vậy bạn có thể thấy một số khác biệt giữa các trình duyệt

Tạo một số nút

Photoshop lên một vài nút. Cũng có thể sử dụng một sprite eh?

Thêm các nút tăng

Chúng ta cần nối các nút này vào từng đầu vào. Bạn sẽ nhận thấy trong phần đánh dấu rằng mỗi cặp nhãn/đầu vào được bọc trong một DIV. Đây là cách thực hành tốt để các đầu vào nhãn được chia thành dòng riêng của chúng [dễ đọc hơn] khi tắt CSS. Nó cũng cần thiết để xác thực với một số DOCTYPES. VÀ, đó là cái móc nhỏ hoàn hảo mà chúng ta có thể nhắm mục tiêu để nối thêm các nút này

$[function[] {

    $["form div"].append['
+
-
'];

}];

Mỗi lớp hai lớp, một lớp "nút" chung sẽ chiếm 90% kiểu dáng và lớp chúng tôi sẽ sử dụng để liên kết sự kiện nhấp chuột. Lớp duy nhất khác để điều chỉnh vị trí nền và sử dụng sprite

Làm cho chúng hoạt động

“Tiếng Anh đơn giản”

1. Cache bộ chọn
2. Lưu giá trị “cũ” của đầu vào [giá trị tại thời điểm click]
3. Nếu nút “dấu cộng” được nhấp…
4. …tăng giá trị lên một
5. Khác nếu nút “trừ” được nhấp…
6. …giảm giá trị xuống một
7. Thả giá trị mới vào đầu vào

$[".button"].on["click", function[] {

  var $button = $[this];
  var oldValue = $button.parent[].find["input"].val[];

  if [$button.text[] == "+"] {
	  var newVal = parseFloat[oldValue] + 1;
	} else {
   // Don't allow decrementing below zero
    if [oldValue > 0] {
      var newVal = parseFloat[oldValue] - 1;
    } else {
      newVal = 0;
    }
  }

  $button.parent[].find["input"].val[newVal];

}];

Đoạn mã trên thực hiện mọi thứ chúng tôi đã mô tả, với một chút logic bổ sung. Trước khi giảm giá trị, nó đảm bảo rằng số ít nhất có giá trị từ 1 trở lên. Điều này ngăn không cho giá trị bị âm [ít nhất là thông qua việc sử dụng các nút này]. Đây là điều dễ hiểu đối với các đầu vào kiểu “quanity”, nhưng nếu mục đích sử dụng của bạn không cần điều này, chỉ cần xóa trình bao bọc “nếu” đó

Ngoài ra còn có một vài dòng nhận xét về tiết kiệm AJAX. Nếu ứng dụng của bạn hoàn toàn động-tuyệt-như thế, bạn có thể muốn lưu giá trị tự động sau khi nhấn nút, khiến nó có cảm giác giống ứng dụng máy tính để bàn hơn một chút

Nếu bạn làm điều đó, bạn có thể đặt một số mã như thế này [có lẽ]

var id = $button.attr["id"];
$.ajax[{
  type: "POST",
  url: "dosomething.php?id=" + id + "&newvalue=" + newVal,
  success: function[] {
    $button.parent[].find["input"].val[newVal];
  }
}];

Bạn có thể xóa dòng dưới cùng của chức năng nhấp chuột nơi nó cập nhật giá trị và để nó trong chức năng phụ "thành công" ở trên. Bằng cách đó, số không được cập nhật trực quan trừ khi lưu AJAX thành công

Gia tăng trong HTML là gì?

Làm cách nào để đặt tăng và giảm trong JavaScript?

Làm cách nào để tăng số lượng trong JavaScript?