CODEWITHSUNDEEP
javascriptdocument
Matt Elhotiby
Matt Elhotiby

Reputation: 44086

document.write is not working for this block

I have this block:

document.write('<div class="sz1of4 unit sm-quad">
    <ul>
        <li><a href="/shop_pos/pos_hardware/pos_computer" alt="POS Computer">POS Computer</a></li>
        <li><a href="/shop_pos/pos_hardware/touch_monitor" alt="Touch Monitor">Touch Monitor</a></li>
        <li><a href="/shop_pos/pos_hardware/receipt_printer" alt="POS Receipt Printer">POS Receipt Printer</a></li>
        <li><a href="/shop_pos/pos_hardware/cash_drawers" alt="Cash Drawer">Cash Drawer</a></li>
        <li><a href="/shop_pos/pos_hardware/pole_display" alt="Pole Display">Pole Display</a></li>
        <li><a href="/shop_pos/pos_hardware/pos_accessories/88003_002" alt="Fingerprint Scanner">Fingerprint Scanner</a></li>
        <li><a href="/shop_pos/pos_hardware/pos_computer/fz43_mc2_ald" alt="Mobile POS">Mobile POS</a></li>
        <li><a href="/shop_pos/pos_hardware/network/mbr900" alt="3G Backup">3G Backup</a></li>
    </ul>
</div>

<div class="sz1of4 unit sm-quad">
    <ul>
        <li><a href="/restaurant_pos_software" alt="Restaurant POS Software">Restaurant POS Software</a></li>
        <li><a href="/software/aldelo/easy.html" alt="Easy To Use">Easy To Use</a></li>
        <li><a href="/software/aldelo/bar_tabs.html" alt="Bar Tabs">Bar Tabs</a></li>
        <li><a href="/software/aldelo/multilingual.html" alt="Multilingual Capable">Multilingual Capable</a></li>
        <li><a href="/shop_pos/point-of-sale-software/413614" alt="Quickbooks Integration">Quickbooks Integration</a></li>
        <li><a href="/shop_pos/point-of-sale-software/liquor_monitor" alt="Liquor Monitor Capable">Liquor Monitor Capable</a></li>
        <li><a href="/software/aldelo/reservations.html" alt="Reservations">Reservations</a></li>
        <li><a href="/software/aldelo/training_mode.html" alt="Training Mode">Training Mode</a></li>
    </ul>
</div>

<div class="sz1of4 unit sm-quad">
    <ul>
        <li><a href="/mercury/" alt="Integrated Payments">Integrated Payments</a></li>
        <li><a href="http://www.mercurypay.com/products.htm" alt="Fast Transactions">Fast Transactions</a></li>
        <li><a href="http://www.mercurypay.com/merchant-reports.htm" alt="Reduced Errors">Reduced Errors</a></li>
        <li><a href="http://www.mercurypay.com/products.htm" alt="Secure Transactions">Secure Transactions</a></li>
        <li><a href="http://www.mercurypay.com/gift-cards.htm" alt="Fee Free Gift Cards">Fee Free Gift Cards</a></li>
        <li><a href="/mercury/" alt="Free 24/7 Support">Free 24/7 Support</a></li>
        <li><a href="http://www.mercurypay.com/merchants.htm" alt="Competetive Pricing">Competetive Pricing</a></li>
        <li><a href="/mercury/" alt="Get a Free Quote">Get a Free Quote</a></li>
    </ul>
</div>

<div class="sz1of4 unit sm-quad lastUnit">
    <ul>
        <li><a href="http://posnation.com" alt="Free Expert Consultations">Free Expert Consultations</a></li>
        <li><a href="/pos_systems/" alt="Plug & Play POS System">Plug & Play POS System</a></li>
        <li><a href="/pos_support_page" alt="24/7 Support">24/7 Support</a></li>
        <li><a href="/pos_live_time" alt="Live Training">Live Training</a></li>
        <li><a href="/training_dvds" alt="DVD Training">DVD Training</a></li>
        <li><a href="/pos_urgent" alt="Urgent Care Warranty">Urgent Care Warranty</a></li>
        <li><a href="/shop_pos/pos_services" alt="Onsite Installation">Onsite Installation</a></li>
        <li><a href="/shop_pos/" alt="Local Touch - Online Prices">Local Touch - Online Prices</a></li>
    </ul>
</div>');

…that is not displaying with document.write but this one:

document.write('Hey there');

…works well. What's the difference and why does the big block not work?

Upvotes: 1

Views: 239

Answers (4)

Alex Ciminian
Alex Ciminian

Reputation: 11498

JavaScript does not support multiline strings, that's why the example doesn't work for you.

You would be better off using something like createDocumentFragment to get where you want to go.

Upvotes: 3

genesis
genesis

Reputation: 50982

because js expects one-line-functions if these lines don't end with '+ [new line]'

try this one

   document.write('<div class="sz1of4 unit sm-quad">'+
        '<ul>'+
'   <li><a href="/shop_pos/pos_hardware/pos_computer" alt="POS Computer">POS Computer</a></li>'+
' <li><a href="/shop_pos/pos_hardware/touch_monitor" alt="Touch Monitor">Touch Monitor</a></li>'+
'<li><a href="/shop_pos/pos_hardware/receipt_printer" alt="POS Receipt Printer">POS Receipt Printer</a></li>'+
   '<li><a href="/shop_pos/pos_hardware/cash_drawers" alt="Cash Drawer">Cash Drawer</a></li>'+
            '<li><a href="/shop_pos/pos_hardware/pole_display" alt="Pole Display">Pole Display</a></li>'+
'      <li><a href="/shop_pos/pos_hardware/pos_accessories/88003_002" alt="Fingerprint Scanner">Fingerprint Scanner</a></li>'+
'     <li><a href="/shop_pos/pos_hardware/pos_computer/fz43_mc2_ald" alt="Mobile POS">Mobile POS</a></li>'+
'    <li><a href="/shop_pos/pos_hardware/network/mbr900" alt="3G Backup">3G Backup</a></li>'+
    '</ul>'+
    '</div>'+

    '<div class="sz1of4 unit sm-quad">'+
'  <ul>'+
'      <li><a href="/restaurant_pos_software" alt="Restaurant POS Software">Restaurant POS Software</a></li>'+
'      <li><a href="/software/aldelo/easy.html" alt="Easy To Use">Easy To Use</a></li>'+
'      <li><a href="/software/aldelo/bar_tabs.html" alt="Bar Tabs">Bar Tabs</a></li>'+
'      <li><a href="/software/aldelo/multilingual.html" alt="Multilingual Capable">Multilingual Capable</a></li>'+
'      <li><a href="/shop_pos/point-of-sale-software/413614" alt="Quickbooks Integration">Quickbooks Integration</a></li>'+
'      <li><a href="/shop_pos/point-of-sale-software/liquor_monitor" alt="Liquor Monitor Capable">Liquor Monitor Capable</a></li>'+
'      <li><a href="/software/aldelo/reservations.html" alt="Reservations">Reservations</a></li>'+
'      <li><a href="/software/aldelo/training_mode.html" alt="Training Mode">Training Mode</a></li>'+
'  </ul>'+
    '</div>'+

    '<div class="sz1of4 unit sm-quad">'+
' <ul>'+
'    <li><a href="/mercury/" alt="Integrated Payments">Integrated Payments</a></li>'+
'  <li><a href="http://www.mercurypay.com/products.htm" alt="Fast Transactions">Fast Transactions</a></li>'+
'   <li><a href="http://www.mercurypay.com/merchant-reports.htm" alt="Reduced Errors">Reduced Errors</a></li>'+
' <li><a href="http://www.mercurypay.com/products.htm" alt="Secure Transactions">Secure Transactions</a></li>'+
'      <li><a href="http://www.mercurypay.com/gift-cards.htm" alt="Fee Free Gift Cards">Fee Free Gift Cards</a></li>'+
'     <li><a href="/mercury/" alt="Free 24/7 Support">Free 24/7 Support</a></li>'+
'    <li><a href="http://www.mercurypay.com/merchants.htm" alt="Competetive Pricing">Competetive Pricing</a></li>'+
'  <li><a href="/mercury/" alt="Get a Free Quote">Get a Free Quote</a></li>'+
        '</ul>'+
    '</div>'+

    '<div class="sz1of4 unit sm-quad lastUnit">'+
' <ul>'+
'  <li><a href="http://posnation.com" alt="Free Expert Consultations">Free Expert Consultations</a></li>'+
'    <li><a href="/pos_systems/" alt="Plug & Play POS System">Plug & Play POS System</a></li>'+
'     <li><a href="/pos_support_page" alt="24/7 Support">24/7 Support</a></li>'+
'      <li><a href="/pos_live_time" alt="Live Training">Live Training</a></li>'+
'<li><a href="/training_dvds" alt="DVD Training">DVD Training</a></li>'+
' <li><a href="/pos_urgent" alt="Urgent Care Warranty">Urgent Care Warranty</a></li>'+
'   <li><a href="/shop_pos/pos_services" alt="Onsite Installation">Onsite Installation</a></li>'+
'  <li><a href="/shop_pos/" alt="Local Touch - Online Prices">Local Touch - Online Prices</a></li>'+
'</ul>'+
    '</div>');

Upvotes: 0

imsky
imsky

Reputation: 3289

Multi-line strings must end each line with \.

Here's the fiddle updated: http://jsfiddle.net/pSpHb/1/

Upvotes: 7

Quentin
Quentin

Reputation: 944498

The first one has a (literal) new line in the middle of a string. You can't do that in JS.

Upvotes: 0

Related Questions