CODEWITHSUNDEEP
javascriptjqueryhtml
Assaf Sagee
Assaf Sagee

Reputation: 1

href links in my project are not clickable

href links in my project are not clickable, I have this HTML and javascript, and my href in the HTML are not clickable, they suppose to show my shopping cart. Can someone please help me to figure out what went wrong? I tried anything to solve it.

<!DOCTYPE html>
<html>
<head>
<title>Words</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="words.css" type="text/css"/>
<script type="text/javascript" src="words.js"></script>
</head>
<body>
<h1>Shopping Cart</h1>

<div>
<ul>
    <li><a class="add-to-cart" href="#" data-name="Apple" data-price="1.22">
</a>Apple $1.22</li>
    <li><a class="add-to-cart" href="#" data-name="Banana" data-price="1.33">
</a>Apple $1.22</li>
    <li><a class="add-to-cart" href="#" data-name="Shue" data-price="22.33">
</a>Apple $1.22</li>
    <li><a class="add-to-cart" href="#" data-name="Frisbee" data-price="5.22">
</a>Apple $1.22</li>

</ul>
    <button id="clear-cart">Clear cart</button>
</div>

<div>
<ul id="show-cart">
    <li></li>
    </ul>
</div>

</body>
</html>

The JavaScript

$(".add-to-cart").click(function(event) {
    event.preventDefault();
    var name = $(this).attr("data-name");
    var price = Number($(this).attr("data-price"));

    addItemToCart(name, price, 1);
        displayCart();
    });

    function displayCart() {
        var cartArray = listCart();
        var output = "";
        for (var i in cartArray) {
            output += "<li>" + cartArray[i].name + " " + cartArray[i].count + "</li";
        }
        $("#show-cart").html(output);
    }
});

Upvotes: 0

Views: 51

Answers (1)

Mateusz H.
Mateusz H.

Reputation: 107

You links are not clicable because you post end of tag in wrong place. Here is correct code :

<ul>
    <li><a class="add-to-cart" href="#" data-name="Apple" data-price="1.22">
    Apple $1.22</a></li>
    <li><a class="add-to-cart" href="#" data-name="Banana" data-price="1.33">
    Apple $1.22</a></li>
    <li><a class="add-to-cart" href="#" data-name="Shue" data-price="22.33">
Apple $1.22</a></li>
    <li><a class="add-to-cart" href="#" data-name="Frisbee" data-price="5.22">
Apple $1.22</a></li>

</ul>

In HTML5 and older versions closing tags should be always in right order like:

<tag1><tag2><tag3></tag3></tag2></tag1>

If you use link tag , you should remember to post your closing tag at the end of content which will be clicable like: 

<a href="someurl.html">  Clicable content </a>

Upvotes: 3

Related Questions