0

Hi I'm trying to run this piece of code in HubSpot but the mangler is breaking my script. Is there a better way I should be implementing the code?

function bindSpeakerImages(speakerImage) {
  var speakerConatiner = speakerImage.parentNode;
  console.log(speakerConatiner); // RETURNS OK
  var speakerBio = speakerConatiner.querySelector('.speaker-description');
  console.log(speakerBio);// BREAKING POINT
  speakerImage.addEventListener('mouseenter', toggleSpeakerBio);
  speakerBio.addEventListener('mouseenter', toggleSpeakerBio);
}

The SpeakerBio is returned null. But it works fine in my local environment prior to compression.

Uncaught TypeError: Cannot read property 'addEventListener' of null(…)

I used the same .querySelector method in this piece of code and it works fine.

function toggleSpeakerBio() {
  var speakerConatiner = this.parentNode;
  var speakerBio = speakerConatiner.querySelector('.speaker-description');
  console.log(speakerBio) // Returns OK
  toggleState(speakerBio, 'hidden', 'visible');
}

and if it is beneficial here is my entire script.

'use strict';

var speakerImages = document.querySelectorAll('.speaker-image');

var toggleState = function toggleState(elem, one, two) {
  elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one);
};

function toggleSpeakerBio() {
  var speakerConatiner = this.parentNode;
  var speakerBio = speakerConatiner.querySelector('.speaker-description');
  toggleState(speakerBio, 'hidden', 'visible');
}

function bindSpeakerImages(speakerImage) {
  var speakerConatiner = speakerImage.parentNode;
  console.log(speakerConatiner);
  var speakerBio = speakerConatiner.querySelector('.speaker-description');
  console.log(speakerBio);
  speakerImage.addEventListener('mouseenter', toggleSpeakerBio);
  speakerBio.addEventListener('mouseenter', toggleSpeakerBio);
  speakerImage.addEventListener('mouseleave', toggleSpeakerBio);
  speakerBio.addEventListener('mouseleave', toggleSpeakerBio);
}

for (var _i = 0; _i < speakerImages.length; _i++) {
  bindSpeakerImages(speakerImages[_i]);
}

Here is the HTML

<div class="speaker-container">
  <div class="speaker-image">
    <img src="image.jpg"/>
  </div>
  <h4 class="speaker-name">name</h4>
  <h5 class="speaker-title">title</h5>
  <div class="speaker-description" data-state="hidden">
    <p>This is speaker</p>
  </div>
</div>
Jleibham
  • 480
  • 2
  • 9
  • 26
  • Breaking it how? You noted where, but we need to see the error message or the console logs or something. – ssube Nov 09 '16 at 15:55
  • It is returned null. So the var isn't getting filled with the proper value. – Jleibham Nov 09 '16 at 15:55
  • You showed only a part of your code, and on top of that you didn't include **desired** output and **what you got instead**. Now we have to go through this "did you do X" process. Anyway, what you described looks like the case where JS gets executed before DOM is ready, that's why it works locally but not online when compressed (hence me mentioning that this is only a part of the code). – Mjh Nov 09 '16 at 15:57
  • I showed a small snippet of the code because I felt it was all that was relevant to the question. The code is launching after the DOM is ready in both environments. All my other code works fine. I'm just having a problem with the quereySelector not grabbing the .speaker-description. I'll add another piece of code where I'm using the same method to do the same thing and it works fine. – Jleibham Nov 09 '16 at 16:03
  • If it's not grabbing the desired element, that's because it doesn't exist at the point when you execute your JS. Since compressed, bundled JS loads much faster than file after file, it *seems* that the issue what I described. The snippet included doesn't help to pinpoint the problem sadly. There's nothing in it that might hint why you don't get desired output, so the only logical conclusion is that you are not getting what you want because it's not there. And there's only one reason for it not being there. Try to go from there. – Mjh Nov 09 '16 at 16:07
  • Yeah I understand it is not there, my question was am I implementing the code in bad way to cause the compressor to break it? The code is pretty straight forward so I would imagine it should run okay. I know HubSpot can be finicky about things in CSS. I just don't know enough about JS or JS best practices to understand if I'm breaking one. – Jleibham Nov 09 '16 at 16:13

0 Answers0