CODEWITHSUNDEEP
javascripthtml
John Throboslky
John Throboslky

Reputation: 45

onclick function gives me ´can't find variable: function name' and doesn't work

So I have this code that when you click a paragraph it links you to another html page , simple code right ? But it doesn't work somehow and I would like to know why. The functions that don't work are "tshirt" "astronautcapa" and "capasmovel" and I find it so odd because they are just equal to the all the functions I did and are there and work but these ones don't

Html : 

   <!DOCTYPE html>


<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Nativus Clothing</title>
    <meta name="description" content="An interactive getting started guide for Brackets.">
    <link rel="stylesheet" href="main.css">
     <script src ="shop.js" async>
    </script>
</head>
<body>
    <center>
        <nobr style="font-family:cute; color: #4a7bb5;font-weight: 600;line-height: 0;font-size: 110px;"><img src="" alt="logo" style="width:150px;height:150px;vertical-align: middle" ></nobr>

    </center>
    <HR size=2 style="color: aqua"></HR>
    <button class="button" onclick="mainpage();"><b>Home</b></button>
    <div class="dropdown">
    <button class="button" onclick="products();"><b>Produtos</b></button>
    <div class="dropdown-content">
    <a href="#" onclick="tshirt();">T-Shirts</a>
    <a href="#" onclick="hoodies();">Hoodies</a>
    <a href="#" onclick="capasmovel();">Capas de telemovel</a>
    </div>
    </div>

    <button class="button"><b>Personalização</b></button>
    <div class="dropdown">
    <button class="button"><b>Sobre nós</b></button>
        <div class="dropdown-content">
            <a href="#" onclick="empresa();">Empresa</a>
            <a href="#" onclick="capasmovel();">Artistas</a>
        </div>
    </div>
    <img src="shopping_cart.png" alt="carrinho" style="width:40px;height:40px;float:right;margin-right: 100px" onclick="gotocarrinho();" >
    <HR size=2 style="color: #002366"></HR>

        <div class="card">
  <img src="nave.png" alt="nave t-shirt" style="width:100%;height: 300px">
  <p class="product_name" onclick="tshirt_world();">T-Shirt World</p>
  <p class="price">14.99€</p>

    </div>
    <div class="card">
        <img src="et.png" alt="et t-shirt" style="width:100%;height: 300px">
        <p class="product_name" onclick="tshirt_et();">T-Shirt ET</p>
        <p class="price">14.99€</p>

    </div>
    <div class="card">
        <img src="astronaut.png" alt="astronaut t-shirt" style="width:100%;height: 300px">
        <p class="product_name" onclick="tshirt_astronaut();">T-Shirt Astronaut</p>
        <p class="price">14.99€</p>

    </div>
    <div class="card">
        <img src="astronaut_case.png" alt="astronaut t-shirt" style="width:100%;height: 300px">
        <p class="product_name" onclick="astronaut_capa();">Capa Iphone XR Astronaut</p>
        <p class="price">9.99€</p>

    </div>




</body>

JavaScript:

               function mainpage(){
    window.location = "index.html"
    }
                    function products(){
    window.location = "products.html"
    }




            function tshirt() {
                        window.location = "tshirtsproducts.html"
            }

            function astronaut_capa(){
                        window.location = "astronaut_case.html"
            }

            function capasmovel() {
                    window.location = "cases_products.html"
            }





     var removeCartItensButton = document.getElementsByClassName('btn-danger');

                 console.log(removeCartItensButton.length)

                for(var i = 0; i<removeCartItensButton.length; i++){

                    var button = removeCartItensButton[i]

                    button.addEventListener('click', removeCartItem)


                    }

                    var quantityInputs = document.getElementsByClassName('quantity')
                    for(var i = 0; i<quantityInputs.length; i++){

                        var input = quantityInputs[i]
                        input.addEventListener('change', quantityChanged)
                    }


                    var addToCartButtons = document.getElementsByClassName('adicionar_carrinho')

                    for(var i = 0; i<addToCartButtons.length; i++){
                        var button = addToCartButtons[i]
                        button.addEventListener('clicked',addToCartClicked())
                    }





           function  getSize() {

               var size = ""
               if( document.getElementById('xs').className = "clicked_size_button"){

                   size = xs
               }
               if( document.getElementById('s').className = "clicked_size_button"){

                   size = s
               }
               if( document.getElementById('m').className = "clicked_size_button"){

                   size = m
               }
               if( document.getElementById('l').className = "clicked_size_button"){

                   size = l
               }
               if( document.getElementById('xl').className = "clicked_size_button"){

                   size = xl
               }

               return size



           }




    function addToCartClicked(event){



        var product = document.getElementsByClassName('product_name')[0].innerText
        var price = document.getElementsByClassName('price')[0].innerText
        var size = document.getElementsByClassName('clicked_size_button')[0].innerText
        var info = [product,size,price];
        console.log(info)
        localStorage.setItem("names", JSON.stringify(info));


    }


    function reloadShoppingCart()
    {
        var storedInfo = JSON.parse(localStorage.getItem("names"));
        var cartRow = document.createElement('div');
        cartRow.classList.add('rTableRow')
        var cartItems = document.getElementsByClassName('rTable')[0]
        cartRow.innerHTML = cartRows
        cartItems.append(cartRow)
    }





    function quantityChanged(event)
    {
        var input = event.target
        if(isNaN(input.value) || input.value <= 0){
            input.value = 1;
        }
        updateCartTotal()

    }

    function removeCartItem(event){

        var ButtonCliked = event.target
                        ButtonCliked.parentElement.parentElement.remove()
                        updateCartTotal()

    }

    function updateCartTotal(){
         var cartItemContainter = document.getElementsByClassName('rTable')[0]
         var cartRows = cartItemContainter.getElementsByClassName('rTableRow')

         var total = 0


         for(var i = 0; i<cartRows.length; i++){

             var cartRow = cartRows[i]
             var priceElement = cartRow.getElementsByClassName('cart-price')[0]
             var quantityElement = cartRow.getElementsByClassName('quantity')[0]
             console.log(priceElement,quantityElement)


             var price = parseFloat(priceElement.innerText.replace("$",""))
             var quantity = quantityElement.value

             total = total + (price * quantity)

         }

        total = Math.round ( total * 100 ) / 100
        document.getElementsByClassName('total')[0].innerText = "Total: " + total + "€";

    }



               function SizeButtonStyle(el) {




                     if(el.id == 'xs'){
                        document.getElementById('xs').className = "clicked_size_button";
                        document.getElementById('s').className = "unclicked_size_button";
                         document.getElementById('m').className = "unclicked_size_button";
                         document.getElementById('l').className = "unclicked_size_button";
                         document.getElementById('xl').className = "unclicked_size_button";


                     }
                      if(el.id == 's'){
                      document.getElementById('xs').className = "unclicked_size_button";
                        document.getElementById('s').className = "clicked_size_button";
                         document.getElementById('m').className = "unclicked_size_button";
                         document.getElementById('l').className = "unclicked_size_button";
                         document.getElementById('xl').className = "unclicked_size_button";
                     }
                      if(el.id == 'm'){
                        document.getElementById('xs').className = "unclicked_size_button";
                        document.getElementById('s').className = "unclicked_size_button";
                         document.getElementById('m').className = "clicked_size_button";
                         document.getElementById('l').className = "unclicked_size_button";
                         document.getElementById('xl').className = "unclicked_size_button";
                     }
                      if(el.id == 'l'){
                        document.getElementById('xs').className = "unclicked_size_button";
                        document.getElementById('s').className = "unclicked_size_button";
                         document.getElementById('m').className = "unclicked_size_button";
                         document.getElementById('l').className = "clicked_size_button";
                         document.getElementById('xl').className = "unclicked_size_button";
                     }
                      if(el.id == 'xl'){
                        document.getElementById('xs').className = "unclicked_size_button";
                        document.getElementById('s').className = "unclicked_size_button";
                         document.getElementById('m').className = "unclicked_size_button";
                         document.getElementById('l').className = "unclicked_size_button";
                         document.getElementById('xl').className = "clicked_size_button";
                     }



    }



     function gotocarrinho(){
         window.location = "shopping_card.html"
     }

Upvotes: 1

Views: 526

Answers (1)

Mohammad Ali Rony
Mohammad Ali Rony

Reputation: 4925

use javascript:tshirt(); in href

<a href="javascript:tshirt();">T-Shirts</a>

Upvotes: 1

Related Questions