javascript simple function removes layout

I have a JQuery, Javascript, HTML website. I made a simple function to strike text if it is not equal to 0.

The function seems to work, but everything else in the page is gone. I only see my the striked text.

productPrice should be striked and salePrice not striked... the function works but the layout gets messed up. Help ?

The text is displayed like this on my page :

<label id="productPrice">Price</label>
        <label id="salePrice">Sale Price</label>

Heres the code, I can supply more if needed.

function

 if (product.price != 0);
{
    var salePrice = product.price;
    document.write(salePrice.strike());
}

array

var catalog = {"products": [
{"thumbnail": '/pub/3/resources/ti/store/mobile/chrome.png',
    "brand": "Google",
    "name": "Chrome",
    "description": "Lorem ipsum dolor开发者_StackOverflow中文版 sit amet, consectetur adipiscing elit.",
    "rating": '5',
    "sale_price": "0.00$",
    "sale_desc": "",
    "price": "0.00$"},

Parameters

    $('#productPrice').html(product.price);

---

document.write() is removing everything from the page but what you write. That's how it works. You can try it now, put javascript: document.write("Gone"); in your address bar and the page will disappear in the same fashion.

Also you have a semicolon after your if statement, so your code will always run.

if (product.price !== 0) {
    document.getElementById('productPrice').style.textDecoration = 'line-through';
}

or

if (product.price !== 0) {
    $('#productPrice').css('text-decoration', 'line-through');
}