i have been trying build simple products page there product. wanted when click "add basket" button of product, increments total of product number. problem code clicking on add basket button increment products no matter what. wrong code?
$( document ).ready(function() { var product = function(name,price,counter) { this.name = name; this.price = price; this.counter = counter; // this.button = button; } product.prototype.addtobasket = function(){ return this.counter.innerhtml++; } //products, addtobasket buttons , removefrombasket buttons var allproducts = document.queryselectorall('.product'); var productred = document.queryselector('.productred'); var productblue = document.queryselector('.productblue') var addbtn = document.queryselectorall('.addtobasket'); var rmvbtn = document.queryselectorall('.removefrombasket') //red product var redproductprice = $('#red .price-tag'); var redproductcounter = document.getelementbyid('red-counter'); var redproductelement = document.getelementbyid('red'); var redproduct = new product(redproductelement,redproductprice.html(),redproductcounter); //blue product var blueproductprice = $('#blue .price-tag'); var blueproductcounter = document.getelementbyid('blue-counter'); var blueproductelement = document.getelementbyid('blue'); var blueproduct = new product(blueproductelement,blueproductprice.html(),blueproductcounter); var clickbtn = function(obj) { for (var = 0; < allproducts.length ; i++) { var currentbtn = addbtn[i]; if(currentbtn.parentelement.classname === 'product productred') { currentbtn.addeventlistener('click', function(e){ e.preventdefault(); obj.addtobasket(); }, false) } else if(currentbtn.parentelement.classname === 'product productblue') { currentbtn.addeventlistener('click', function(e){ e.preventdefault(); obj.addtobasket(); }, false) } } } clickbtn(redproduct); clickbtn(blueproduct); }); body { width: 1060px; margin: 10px auto; font-family: "arial",sans-serif; } .column { margin-top: 50px; width: 100%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center; } .productred, .productblue { /*position: absolute;*/ /*top: 50px;*/ display: block; margin: 10px; border: 0.5px solid; width: 30%; min-height: 300px; text-align: center; } .productred .addtobasket, .productred .removefrombasket, .productblue .addtobasket, .productblue .removefrombasket { position: relative; top: 105%; } .checkoutdiv { margin-top: 50px; } .productred .price-text, .productblue .price-text { position: fixed; top: 30%; color: white; } .productred .counter, .productblue .counter { position: absolute; top: 28%; margin-left: 290px; /*left: 38%;*/ color: yellow; border: 1px solid; padding: 5px; } #red { background-color: red; } #blue { background-color: blue; } #green { background-color: green; }<!doctype html> <html lang="en"> <head> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgfzhoseeamdoygbf13fyquitwlaqgxvsngt4=" crossorigin="anonymous"> </script> <meta charset="utf-8"> <title>order page</title> </head> <body> <main id="container"> <div class="column"> <div class="product productred" id="red"> <p class="price-text"> price: <span class='price-tag'>10</span></p> <p id='red-counter' class="counter">0</p> <button class="addtobasket red">add basket</button> </div> <div class="product productblue" id="blue"> <p class="price-text"> price: <span class='price-tag'>15</span> </p> <p id='blue-counter' class="counter">0</p> <button class="addtobasket blue">add basket</button> </div> </main> </body> </html>
Comments
Post a Comment