Trying to create a Javascript link within what I believe are variables?

Question

I downloaded a theme and seem to be having some trouble. The page in question is here - http://pureearthsoaps.com/test.html

Each product is created using (if I've been explained correctly) Javascript variables. See below:

  1: {
name: 'Bar Soap',
scent: 'Cucumber & Oatmeal, Patchouli, Peppermint, Frankincense, Holiday, Coffee & Hazelnut, Apple, and more',
size: '1 bar',
price: '3.<span class="small">95</span>',
short_desc: 'An innovative and moisturizing way to keep shower time fun.',
desc: 'Since we all love being happy naked, why not keep it that way? Treat yourself to scrumptious skincare with Naked Bar, an innovative and moisturizing way to keep shower time fun.'},

I enter the information here and it corresponds to the code here:

      __ += '<li id="wine-list-'+i+'">'+wines[i].name+',</li>';
  full += '<div id="wine-info-'+i+'" class="wine-info transition-05"><h2>'+wines[i].name+'</h2><h4></h4>'+
    '<div class="line"></div>'+
    '<div class="price">$'+wines[i].price+'</div>'+
    '<div class="lbl"><label>Scent:</label><span>'+wines[i].scent+'</span></div>'+
    '<div class="lbl"><label>Size:</label><span>'+wines[i].size+'</span></div>'+
    '<div class="img"></div>'+
    '<div class="bottle-x"></div>'+
    '<div class="desc">'+wines[i].desc+'</div>'+
    '<div class="order">'+wines[i].order+'</div>'+
  '</div>';

Currently, the "order now" button that shows up on that product page appears on each product, but cannot be linked. The div class of "order" above was added at the advice of a coder friend; it makes the button appear, but we can't make it work. I have added this below the "desc" line in the first code block with no luck:

    order: '<a  onClick="location.href='http://google.com'" href="http://google.com"></a>'

So... help! How do I make this work?

Answer 1

The immediate problem of quotes has been addressed by the others. I will address some of the underlying problems in your code, that will help prevent mistakes in the future.

Firstly

var obj = {}

This is a JavaScript Object, specifically an object literal.

Secondly

JavaScript variables cannot start with or only be numbers, so 1 = {}; is invalid

Instead of assigning your objects to a number and iterating through them, generally what you want is an array of objects. So...

var wines = [{name:'wine', blah:'', ......}, {name:'second wine', ....}]

This way you can iterate through them in a loop whilst getting wines[i] , and your code will be valid :)

Thirdly

It is generally a good practice to try to reduce the amount of html that is written to the page by your js.

Why? It is way easier to debug, as an innerHTML/.html() can contain many statements. And it is also faster.

Try to have the elements on the page and write to them using getElementById and textContent , or use jquery's selector and text() or html() . If they need to be hidden, set them as hidden initally in your html/css, and modify that css property or class later with js.

Finally

Inline onClicks are so 90's. And will literally cause you headache's when you start double crossing strings.

Use jQuery's on() method or

document.getElementById('elem').onclick = function(){
   //Code here
};

Answer 2

your quotation marks are out of order. and why do you need an onClick if you have a href? try this:

order: '<a href="http://google.com">order now</a>'

or this

order : '<a href="#" onClick="location.href=\"http://google.com\"">order now</a>'

i just had a look at your site, and it seems that the order property is not present. here is an example of how exaclty it should look like this. also mind the position of the curly braces, the oder line has to be inside.

1: {
  name: 'Bar Soap',
  scent: 'Cucumber & Oatmeal, Patchouli, Peppermint, Frankincense, Holiday, Coffee     & Hazelnut, Apple, and more',
  size: '1 bar',
  price: '3.<span class="small">95</span>',
  short_desc: 'An innovative and moisturizing way to keep shower time fun.',
  desc: 'Since we all love being happy naked, why not keep it that way? Treat yourself  to scrumptious skincare with Naked Bar, an innovative and moisturizing way to keep shower time fun.',
  order: '<a href="/order.php">order now</a>'
},

Answer 3

The quotation marks are causing your problems.

{
  name: 'Bar Soap',
  scent: 'Cucumber & Oatmeal, Patchouli, Peppermint, Frankincense, Holiday, Coffee & Hazelnut, Apple, and more',
  size: '1 bar',
  price: '3.<span class="small">95</span>',
  short_desc: 'An innovative and moisturizing way to keep shower time fun.',
  desc: 'Since we all love being happy naked, why not keep it that way? Treat yourself to scrumptious skincare with Naked Bar, an innovative and moisturizing way to keep shower time fun.',
  order_url: 'http://google.com'
}

Then, do something like this:

for (var i in wines) {
      _ += '<li id="wines-'+i+'"><h2>'+wines[i].name+'</h2>'+
        '<div class="lbl"><label>Scent:</label><span>'+wines[i].scent+'</span></div>'+
        '<div class="lbl"><label>Size:</label><span>'+wines[i].size+'</span></div>'+
        '<div class="img"></div>'+
        '<div class="line"></div>'+
        '<div class="short-desc">'+wines[i].short_desc+'</div>'+
        '<div class="price">$'+wines[i].price+'</div>'+
      '</li>';
      __ += '<li id="wine-list-'+i+'">'+wines[i].name+',</li>';
      full += '<div id="wine-info-'+i+'" class="wine-info transition-05"><h2>'+wines[i].name+'</h2><h4></h4>'+
        '<div class="line"></div>'+
        '<div class="price">$'+wines[i].price+'</div>'+
        '<div class="lbl"><label>Scent:</label><span>'+wines[i].scent+'</span></div>'+
        '<div class="lbl"><label>Size:</label><span>'+wines[i].size+'</span></div>'+
        '<div class="img"></div>'+
        '<div class="bottle-x"></div>'+
        '<div class="desc">'+wines[i].desc+'</div>'+
        '<a href="'+wines[i].order_url+'"><div class="order"></div></a>'+
      '</div>';
    }

Also, don't forget to define the "order" attribute for all of your items.

Hope that helps.