learning project: order list please help

Hi there,
My name is Remco and I just finished reading my first book on JavaScript and jQuery. I’m trying to put my new knowledge to direct action in the shape of an dynamic order list. To put my intention to the test I created a simple table where every tr contains 4 td's; product picture, product description, product price and finally a checkbox which allows the user to add the specific product to his/her order list.

Hope you guys won’t be too hard on me, keep in mind that this is the first piece of code I ever wrote alone after finishing my book. As most of you probably understood I’m trying to retrieve the text data from both description and price td’s from a tr selected by the user. It took me a lot of coding-time and some swearing to get where I am now. I succeeded in retrieving the wanted data, combining them into a new text node and….appending it to a new li element on the order list. Great! My coding however forces the tr to be selected in order for the two variables containing the wanted data to be declared. The result of this is that if a user decides to add a product to its order list by checking (and thereby clicking on the to be selected tr) the checkbox, my two var’s are undefined. By clicking for a second time (and so unchecking the box) the text node is placed in the ul…? Can someone please shed some light in this darkness because I can’t find the solution. My code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#bestelDiv {
        border: 2px solid #000;
        width: 400px;
        height: auto;
}
    .bestVink {
        background-color: #666
}
.emPhas {
    background-color: #C3C
    }
#prodTabel {
    border: 1px solid #C00
    }

</style>
<script src="script/jquery-1.11.3.min.js"></script>
<script>

var rij;
var prijs;

$(document).ready(function(e) {
    $('tr').on('click',function () {

        $('tr').removeClass('emPhas');
        $(this).addClass('emPhas');
            rij = $(this).find('td.prodOmschr').text();
            prijs = $(this).find('td.prijs').text();
    })
// if ($('.bestVink').is(":checked")) this didnt work out somehow
       $('.bestVink').on('click', function(){

        var newItem = document.createElement('li');
        var lijstItem = document.createTextNode(rij+ ' '+prijs);
            newItem.appendChild(lijstItem);
            $('#bestellijst').append(newItem);
    })

    $('#showList').on('click', function(){
        $('#bestelDiv').slideToggle();
    })
});
console.log(rij);
console.log(prijs);

</script>
</head>

<body>
<table id="prodTabel">
<tr id="broodje_zalm">
    <td class="foto_brzalm">productfoto</td>
    <td class="prodOmschr">Petit Parisienne verse zalmfilet en roomkaas</td>
    <td class="prijs">€ 6.95</td>
    <td class="check" ><input type="checkbox" class="bestVink" /></td>
</tr>
<tr id="broodje_geitroomwal">
    <td class="foto_brgeitwal">productfoto</td>
    <td class="prodOmschr">Petit Parisienne geitenroomkaas en walnoot</td>
    <td class="prijs">€ 5.95</td>
    <td class="check"><input type="checkbox" class="bestVink" /></td>
</tr>
</table>
<button id="showList">Toon uw bestellijst</button>
<div id="bestelDiv">
<h2 align="center">Uw bestellijst</h2>

<ul id="bestellijst">

</ul>

</div>
</body>
</html>

Topic Participants
remcoelisha
jakecigar

learning project: order list please help

learning project: order list please help

Topic Participants

remcoelisha

jakecigar