I do like the following jacket technique though.
const covers = document.querySelectorAll(".jacket");
covers.forEach(function (cover) {
cover.addEventListener("click", coverClickHandler);
});
That one’s looking sweet. I wanna take it to bed and cuddle with it for a while. 
This way didn’t work:
https://jsfiddle.net/p084276x/
(function initCover() {
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
}
const containers = Array.from(document.querySelectorAll(".video-contain"));
const covers = containers.map(function(videoContainer) {
return videoContainer.firstChild;
});
covers.forEach(function(cover) {
cover.addEventListener("click", coverClickHandler);
});
}());
Maybe firstChild; should be changed to something else, or is it something else that would be changed?
TypeError: Cannot read property ‘classList’ of null"
https://jsfiddle.net/y1v96dsk/
const containers = Array.from(document.querySelectorAll(".video-contain"));
const covers = containers.map(function(videoContainer) {
return videoContainer.firstChild;
});
covers.forEach(function(cover) {
cover.addEventListener("click", coverClickHandler);
});
}());
I don’t see how that technique would be useful there, as each one is being initialised separately.
loadPlayer({
height: 207,
target: ".jacket-left",
width: 277
});
loadPlayer({
height: 207,
start: 4,
target: ".jacket-middle",
width: 277
});
loadPlayer({
height: 207,
target: ".jacket-right",
width: 277
});
How would this have been fixed?
https://jsfiddle.net/y1v96dsk/
I was trying to figure this out.
What would have been the right way?
const containers = Array.from(document.querySelectorAll(".video-contain"));
const covers = containers.map(function(videoContainer) {
return videoContainer.firstChild;
});
covers.forEach(function(cover) {
cover.addEventListener("click", coverClickHandler);
});
}());
Nothing needs to be fixed there.
- “215:8 Uncaught TypeError: Cannot read property ‘classList’ of null”
That code is not appropriate to use on that page. It would work well when you do have a page that is appropriate for it. See post #25
It’s not meant to work on that type of code is what you are saying.
I came across this error in jslint.
I can’t do this because that is longer than 80 characters long.
combined[prop] = Object.assign({}, playerOptions1[prop], playerOptions2[prop]);
https://jsfiddle.net/35h60pgq/
function combinePlayerOptions(playerOptions1 = {}, playerOptions2 = {}) {
const combined = Object.assign({}, playerOptions1, playerOptions2);
Object.keys(playerOptions1).forEach(function checkObjects(prop) {
if (typeof playerOptions1[prop] === "object") {
combined[prop] = Object.assign({},
playerOptions1[prop],
playerOptions2[prop]);
}
});
return combined;
}
This was my attempt at fixing the error.
https://jsfiddle.net/6Lx027sg/
Is that good?
Would you have done it a different way?
function combinePlayerOptions(playerOptions1 = {}, playerOptions2 = {}) {
const combined = Object.assign({}, playerOptions1, playerOptions2);
Object.keys(playerOptions1).forEach(function checkObjects(prop) {
if (typeof playerOptions1[prop] === "object") {
const first = playerOptions1[prop];
const second = playerOptions2[prop];
combined[prop] = Object.assign({}, first, second);
}
});
return combined;
}
When the function parameters are all on the same line, JSLint expects there to be one space between each parameter. That doesn’t work here though because JSLint complains about the line being too long.
The solution is to start a new line after the opening parenthesis and before the {}. That way JSLint knows that they aren’t supposed to be on the same line, and you are then expected to have each parameter on separate lines.
So the solution is to move {} down to a new line, and move the closing parenthesis down to a new line too.
If this is what you mean:
function combinePlayerOptions(playerOptions1 = {}, playerOptions2 = {}) {
const combined = Object.assign({}, playerOptions1, playerOptions2);
Object.keys(playerOptions1).forEach(function checkObjects(prop) {
if (typeof playerOptions1[prop] === "object") {
combined[prop] = Object.assign(
{},
playerOptions1[prop],
playerOptions2[prop]
);
}
});
return combined;
}
When it gets indented 4 spaces, it gets changed back to this:
And jslint doesn’t like this.
function combinePlayerOptions(playerOptions1 = {}, playerOptions2 = {}) {
const combined = Object.assign({}, playerOptions1, playerOptions2);
Object.keys(playerOptions1).forEach(function checkObjects(prop) {
if (typeof playerOptions1[prop] === "object") {
combined[prop] = Object.assign({},
playerOptions1[prop],
playerOptions2[prop]
);
}
});
return combined;
}
When this is used: I don’t need to worry about indenting 4 spaces messing up the code and needing to keep re-fixing the code each time it is placed in jslint.
function combinePlayerOptions(playerOptions1 = {}, playerOptions2 = {}) {
const combined = Object.assign({}, playerOptions1, playerOptions2);
Object.keys(playerOptions1).forEach(function checkObjects(prop) {
if (typeof playerOptions1[prop] === "object") {
const first = playerOptions1[prop];
const second = playerOptions2[prop];
combined[prop] = Object.assign({}, first, second);
}
});
return combined;
}
Would I be able to use that code above, or would this one be able to be written in a way where indenting 4 spaces won’t keep messing up the code where I have to keep re-fixing it inside jslint?
jslint likes this:
function combinePlayerOptions(playerOptions1 = {}, playerOptions2 = {}) {
const combined = Object.assign({}, playerOptions1, playerOptions2);
Object.keys(playerOptions1).forEach(function checkObjects(prop) {
if (typeof playerOptions1[prop] === "object") {
combined[prop] = Object.assign(
{},
playerOptions1[prop],
playerOptions2[prop]
);
}
});
return combined;
}
But indenting 4 spaces the code keeps getting changed back to this:
function combinePlayerOptions(playerOptions1 = {}, playerOptions2 = {}) {
const combined = Object.assign({}, playerOptions1, playerOptions2);
Object.keys(playerOptions1).forEach(function checkObjects(prop) {
if (typeof playerOptions1[prop] === "object") {
combined[prop] = Object.assign({},
playerOptions1[prop],
playerOptions2[prop]
);
}
});
return combined;
}
Try renaming playerOptions1 to just options1, and similar for options2. That way it should all fit on one line.
Yes, that works.
function combinePlayerOptions(options1 = {}, options2 = {}) {
const combined = Object.assign({}, options1, options2);
Object.keys(options1).forEach(function checkObjects(prop) {
if (typeof options1[prop] === "object") {
combined[prop] = Object.assign({}, options1[prop], options2[prop]);
}
});
return combined;
}
Good one. I should mention that the only reason why it was suitable to shorten the names is because the function name makes it extremely clear what type of options they are. If it weren’t for that then other solutions would have needed to be considered instead, such as moving the internal function out elsewhere so that less indenting gives more room.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.