Adding a jacket over my page

css

#42

That doesn’t help. I’m done with this for today. I don’t need the stress.


#43

I removed it as soon as you told me.


#44

What needs to happen with this piece of code, I don’t know yet.

document.querySelector(".jacket").addEventListener("click", function() {
  document.querySelector(".container").classList.remove("hide");
});

Maybe it gets turned into a function:

function () {

}

or maybe something like this:

var = document.querySelector(".");
    .addEventListener("click", );

I have this way:
https://jsfiddle.net/g72cho6j/35/

  function initialOverlayClickHandler() {
    var wrapper = document.querySelector(".jacket");
    hideInitialOverlay(wrapper);
    wrapper.removeEventListener("click", initialOverlayClickHandler);
  }

  var wrapper = document.querySelector(".jacket");
  wrapper.addEventListener("click", initialOverlayClickHandler);
}());

document.querySelector(".jacket").addEventListener("click", function() {
  document.querySelector(".container").classList.remove("hide");
});

I have this way:

https://jsfiddle.net/g72cho6j/33/

  function initialOverlayClickHandler() {
    var wrapper = document.querySelector(".jacket");
    hideInitialOverlay(wrapper);
    wrapper.removeEventListener("click", initialOverlayClickHandler);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }
  initButton(".jacket");
}());
document.querySelector(".jacket").addEventListener("click", function() {
  document.querySelector(".container").classList.remove("hide");
});

#45

Off-Topic

If I highlight text in Paul’s post and quote it, Discourse displays it correctly, attributing it to Paul.

The same happens whoever I quote, of course.

However, if, instead of going to asasass’s original post to quote the text, I highlight it from the post where Paul quoted it, hey presto!

Now it’s attributing that text to Paul, because he was the author of the post from which I took the quote.

TL;DR Always use the original post to quote from, because otherwise Discourse messes up the attributions.


#46

I just will stay away from copying and pasting.


#47

That’s rather throwing the baby out with the bathwater. smile

Quoting is very useful to indicate exactly who and what you’re referring to. You just need to be careful to quote from the original post.

(You’re by no means the only person to make this mistake, so don’t feel too bad about it.)


#48

This Way: with the init button
https://jsfiddle.net/g72cho6j/33/

Last Updated:
https://jsfiddle.net/g72cho6j/70/

I don’t know how to get rid of this error.

(function iife() {
  "use strict";

  function hide(el) {
    el.classList.add("hide");
  }

  function hideInitialOverlay(wrapper) {
    hide(wrapper);
  }

  function initialOverlayClickHandler() {
    var wrapper = document.querySelector(".jacket");
    hideInitialOverlay(wrapper);
    wrapper.removeEventListener("click", initialOverlayClickHandler);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }
  initButton(".jacket");
}());
document.querySelector(".jacket").addEventListener("click", function() {
  document.querySelector(".container").classList.remove("hide");
});

#49

Last Updated:
https://jsfiddle.net/g72cho6j/101/

Would I be doing something like this with this?
document.querySelector(".container").classList.remove("hide");


Wouldn’t this be the shortform way of doing it, breaking it down more?

Do I have the right idea?


function showContainer(Container) {
  var container = document.querySelector(".container");

  if jacket(on) {
    hide(container);
    jacket.off();
    container.classList.add("active");
  } else {
    show(container);
    jacket.on();
  }
}

Would putting it like this fix the error i’m getting in jslint?

And then that would be broken down even more to something like this:

  function showContainer(container) {
    var container = getOff(container);
    hideContainer(container);
    show(container);
    container.classList.add("activate");
  }

#50

Am I thinking in the right direction, or am I off, and I wouldn’t be doing it like that at all?


#51

@Paul_Wilkins

I still haven’t been able to figure this out. But I have been able to figure out and made corrections to the javascript inside the jacket.

This is the only error I’m still receiving inside jslint.

I’m confused about what I would be doing with 2 lines that are outside of a function.

I don’t know what to do with those. I offered my thoughts and ideas on what I think here #49, but nothing concrete. I don’t know if any of that would work, or if they might be part of the solution.

document.querySelector(".jacket").addEventListener("click", function() {
  document.querySelector(".container").classList.remove("hide");
});

Last updated:
https://jsfiddle.net/bwa3os2v/226/

I know what function use strict is:

But it wouldn’t be set up like this because that doesn’t make sense.

(function iife(){
  "use strict";
document.querySelector(".jacket").addEventListener("click", function() {

})();

#52

Would it be put into something that looks like this maybe?

I’m referring to how the code is set up.
There’s the function, then the stuff inside.

    function pauseAllButtons() {
        var buttons = document.querySelectorAll(".playButton");
        buttons.forEach(function hidePause(button) {
            if (isPlaying(button)) {
                showPlayButton(button);
            }
        });
    }

#53

Are you sure?

I remember you doing this code:

the noise function
But this is an entirely different type of code that does other things.
The jacket code just deals with adding and removing it.
I read the code you wrote up on the noise function.
Honestly, that’s not helping me with this.
https://jsfiddle.net/qhkLdveg/24/

Because when I see this:

This function needs a “use strict” pragma.
document.querySelector(".jacket").addEventListener(“click”, function() {

I’m thinking this:

(function iife(){
  "use strict";

})();

But I don’t think that’s the correct code it’s asking for.

Would it be something like this?

I’m trying really hard to figure this out.

Do I almost have it, or am I not even close?


(function iife() {
        "use strict";

        function text() {
            const text = document.querySelector(".jacket");
            const text = new text ("click", function);
            if (isActivated(jacket)) {
                hideContainer(jacket);
            }
        });
}
})();

This isn’t right, but maybe something like this?

(function iife() {
        "use strict";

        function hideJacketButton(button) {
            document.querySelector(".jacketb").addEventListener("click", function() {
                document.querySelector(".wraph").classList.remove("hide");
            }());

Like this???

(function iife() {
        "use strict";

      function hideJacketButton(button) {
            document.querySelector(".jacketb").addEventListener("click", 
function() {
        
  }, false );

            }());

Like This???


(function iife() {
        "use strict";

        function jacketButton(button) {
            var buttons = document.querySelector(".jacket");
            button.addEventListener("click", function() {});

I keep trying and trying and trying.

Are any of these close to the right way of how it is supposed to be done?


#54

Like this???

(function iife() {
        "use strict";

function jacketWrapper(wrapper) {
var wrapper = document.querySelector("jacket");
wrapper.addEventListener("click", function(){  
    
}());

#55

I don’t want to overstep or anything and I do admire that you’re persistent, but I’ve noticed that you @ mention quite a bit. It’s kind of confusing because I’m not sure if you’re specifically asking them for help or if you want help from others.

Also because you rapid fire posts it’s hard to know what’s been fixed and what you need help with. There’s 53 posts in in 5 days and 95% of it is you so it’s really hard to follow what’s going on.

When you say

are you saying that the code is working and you want help following best practices? Or do you mean that it doesn’t work at all? You’re posting the same exact code blocks but with different tabbing and white space so it’s super confusing.

Since you’ve been at this problem for a few days now, it might be more helpful to spend a day or two reviewing some JavaScript/jQuery tutorials.

Also, what does “it” mean? Is this for a school assignment? It might be helpful to understand what “it” is actually is asking for so that we can help


#56

I’m trying to figure out what the answer is and jslint keeps telling me it’s wrong. And I’ve reviewed and reread everything that was told to me and I still can’t figure it out.

There’s an error in the code I can’t seem to resolve. And I’ve been pretty good at this all this time up until now. Figuring out how to resolve the issues. I don’t know why I’m not able to figure this one out.


#57

Which code though? I tried all of your jsfiddles and do not see the “use strict” error. Could you explain what steps I need to do to reproduce your error? I’m trying to help you but these are all of your jsFiddles on this page right now and I don’t know where to start:


#58

This One: This is the code with the error in it that I’m trying to fix.
https://jsfiddle.net/bwa3os2v/235/


(function iife() {
  "use strict";

  function hide(el) {
    el.classList.add("hide");
  }

  function hideInitialOverlay(wrapper) {
    hide(wrapper);
  }

  function initialOverlayClickHandler() {
    var wrapper = document.querySelector(".jacketa");
    hideInitialOverlay(wrapper);
    wrapper.removeEventListener("click", initialOverlayClickHandler);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }
  initButton(".jacketa");
}());
document.querySelector(".jacketa").addEventListener("click", function() {
  document.querySelector(".container").classList.remove("hide");
});


#59

Maaaaaan, I’m so confused. Is the code snippet the problem? That second error with the YT.Player declaration isn’t in the code snippet you provided. Am I supposed to press something?

I see no errors in Chrome (ignore the $st errors, that’s one of my extensions):

Firefox is empty of all errors/warnings:

And Microsoft Edge:


#60

The “use strict” error messages are relatively clear. Until you understand scope better the easiest (but not as good as understanding scope better) way would be to put “use strict” where the error message wants it to be.

A simplified and not entirely correct way of fixing the code would be to add “use strict” after every function eg.

function outer() { 
  'use strict'; 
  function inner() { 
    'use strict'; 

As for the “self-closing” error, as has been mentioned numerous times, always validate your HTML if you want the best chance of having the page work as expected


#61

@Paul_Wilkins said he showed me how to do it 3 times the other day, but I don’t remember him showing me how to do this. #24

The last code I believe he worked on that day was that noise code.

This one:
https://jsfiddle.net/qhkLdveg/24/

And the title of that thread was called: How would I fix these jslint errors?

And I reread that thread he posted the code in multiple times, over and over again, and I still can’t figure it out.