CODEWITHSUNDEEP
javascriptjqueryhtmlexpression
Edson
Edson

Reputation: 275

Valid jQuery selector syntax?

Is this valid syntax?

$('.' + type).append('<p>' + value + '</p>');

This is the full section

$('.submit-items').click(function() {
   var type = $('.food-list .active li').text();
   var value = foodLoads[type];
   $('.' + type).append('<p>' + value + '</p>');
})

Everytime I click the button I get this error

"jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: .

                mango"

mango is one of the possible results of text in ('.food-list .active li').text()

This is the object:

  var foodLoads = {
    orange: 6.7,
    apple: 5.6,
    banana: 12.7,
    grapes: 16.3,
    peach: 2.7,
    pear: 6.5,
    mango: 16.1,
    blueberries: 9.3,
    grapefruit: 1.7,
    strawberries: 3.5,
    tangerine: 3.1,
    watermelon: 8,
    duck: 0,
    beef: 0,
    chicken: 0,
    ham: 0,
    turkey: 0,
    elk: 0,
    pork: 0,
    fish: 0,
    eggs: 0,
    lamb: 0,
    applejuice: 11.8,
    cranberryjuice: 23.3,
    orangejuice: 14.4,
    carrotjuice: 8.6,
    lemonade: 24.3,
    hotchocolatemix: 10.2,
    tomatojuice: 3.5,
    chocolatemilk: 13.3,
    almondmilk: 0.02,
    soymilk: 4,
    wholewheatbread: 6.1,
    whitebread: 10.7,
    bagel: 30,
    waffle: 13.8,
    pancake: 5.3,
    croissant: 12.2,
    muffin: 28.8,
    englishmuffin: 21.3,
    doughnut: 15.2,
    oatmeal: 12.6,
    quinoa: 20.4,
    wholegrainbread: 7.1 
  }

Upvotes: 0

Views: 122

Answers (1)

dannyjolie
dannyjolie

Reputation: 11339

Everything seems legit, but the error message

jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: .

is caused by your selector not returning anything, or text() being empty. Meaning something in here is wrong:

$('.food-list .active li')

If this selector doesn't match anything, or text() returns an empty string, that slighty cryptic error message appears. Demo: https://jsfiddle.net/dannyjolie/f386gzzh/

The actual bug is then caused by

$('.' + type).append('<p>' + value + '</p>') being evaluated as

$('.').append('<p>' + value + '</p>'), which obviously fails.

Upvotes: 1

Related Questions