JavaScript not firing Syntax Error?

Question

I can't get this script to fire. I did notice it said background is not a defined term? I've used this same script set up for years now, just can't figure out where I went wrong. The action that is supposed to happen will look like this. When any of the 5 Hero sub-sections are click they are supposed to take over the hero and remove it's bg.

codepen

function showHidden() {
  var alreadyTrue = $(this).find('.hovershow').css('display');
  if (alreadyTrue == 'none') {
    var swapBg = $(this).css('background');
    $('.color-list').css('background', swapBg)
    $('.closecolor').css('display', 'block');
    $('.color-list .container').css('background', 'transparent');
    $(this).css('background', 'rgba(0,0,0,0.5)');
    $(this).children('.hoverhide').fadeOut(250).css('display', 'none');
    $('.color').not(this).css('display', 'none');
    $(this).width('100%');
    $(this).find('.hovershow').css({
      'display': 'block',
      'opacity': '1'
    });
  } else {
    $('.color').width('20%');
    $('.hovershow').css({
      'display': 'none',
      'opacity': '0'
    });
    $('.hoverhide').css({
      'display': 'block',
      'opacity': '1'
    });
  }
};

$('.color').click(function() {
  showHidden();
  console.log('not working');
});

Can you clarify your problem further - if I click around in your example, I see "not working" logged to the console. — James Thorpe
– James Thorpe, Commented Feb 27, 2015 at 23:12
Maybe a specific browser or cache issue but works fine for me — charlietfl
– charlietfl, Commented Feb 27, 2015 at 23:16
I'm not seeing any of the .css changes though now. I got the console.log to show up. I'm not sure what the problem is honestly. — Aaron
– Aaron, Commented Feb 27, 2015 at 23:20
the .color section you click on is supposed to span full width. and bg is supposed to go transparent. the .color section is the hero section with 5 siblings. — Aaron
– Aaron, Commented Feb 27, 2015 at 23:21
Now you are offering different symptoms than in the question. We don't know what all the expected behaviors are but the problem mentioned in question doesn't seem to be a problem. If there are new issues update the question — charlietfl
– charlietfl, Commented Feb 27, 2015 at 23:29

balzafin · Accepted Answer · 2015-02-27 23:46:06Z

1

this is undefined in your showHidden function. You should pass it from the event handler to the function:

$('.color').click(function() {
  showHidden(this);
  console.log('not working');
});

function showHidden(el) {
    // use el or something else here insted of this (this is a reserved word)
    var alreadyTrue = $(el).find('.hovershow').css('display');

    // rest of the code
});

answered Feb 27, 2015 at 23:46

balzafin

1,4261 gold badge17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

charlietfl Over a year ago

Or just pass as reference. $('.color').click(showHidden)

Aaron Over a year ago

Do you mind sending me a codepen with it in place. I tried manually putting it in and it didn't work. @balzafin

Collectives™ on Stack Overflow

JavaScript not firing Syntax Error?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related