Question

My question is why when i click the button the only thing getting shown is this “Pricelist” and all the other lines with variables in it get omitted.

function showmessage() {
    var sendcost, totalcost;
    if (document.pricelist.total.value<11) {
        sendcost = 3; 
    }   
    else {
        sendcost = 2; 
    }   
    if (document.pricelist.option.checked) {
        sendcost = parseInt(document.pricelist.option.value) + parseInt(sendcost);
    }
    totalcost = parseInt(sendcost) + parseInt(document.pricelist.total.value);

    document.write("Pricelist","</br>");
    document.write("Products price: "+document.pricelist.total.value+"</br>");
    document.write("Send fee: "+sendcost+"</br>");
    document.write("Total cost: "+totalcost+"</br>");
}

<form name="pricelist">
Tuna Salad = 4 <input type="checkbox" name="choice" value="4" onchange="checkTotal()" /></br>
Pasta = 13 <input type="checkbox" name="choice" value="13" onchange="checkTotal()" /></br>
Milk = 3 <input type="checkbox" name="choice" value="3" onchange="checkTotal()" /></br>
Chocolate = 2 <input type="checkbox" name="choice" value="2" onchange="checkTotal()" /></br>
Same day delivery<input type="checkbox" name="option" value="5" /></br>
Total: <input type="text" size="2" name="total" value="0"/>
<input type="button" value="Procceed to checkout" onclick='return showmessage();' />

Answer 1

document.write when called after the page loads will destroy the entire page, therefore there will be no form with name pricelist anymore therefore document.pricelist.total.value will cause Uncaught TypeError: Cannot read property 'total' of undefined, which causes your script to terminate prematurely.

I’d suggest using something other than document.write.

But to avoid the current error just save the value of document.pricelist.total.value to a variable before its destroyed.

var value = document.pricelist.total.value;
document.write("Pricelist","</br>");
document.write("Products price: "+value+"</br>");
document.write("Send fee: "+sendcost+"</br>");
document.write("Total cost: "+totalcost+"</br>");