We Keep Coding

How to rewrite code without the .video element in it? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 months ago.
Improve this question
How would that be done here? https://jsfiddle.net/bqfv5j06/
Those were the instructions I was given.
Currently, I am telling JavaScript to go find it every time a button
is clicked. This is the equivalent of Googling for the person’s phone
number everyday. It is a waste of time and system resources.
document.querySelectorAll('button.cover').forEach(function(button) {
button.addEventListener('click', function (event) {
document.querySelector('.video').dataset.id = event.target.dataset.id;
});
});
How exactly would this be done?
Me: If I understand you correctly, you are wanting me to rewrite that
code without the .video element included in it?
Do I have that correct?
And the answer I got back was, "Yes"

Your instructor wants you to cache the result of the call once, and then use that cache instead of searching the DOM every time.
const myVideo = document.querySelector('.video');
document.querySelectorAll('button.cover').forEach(function(button) {
button.addEventListener('click', function (event) {
myVideo.dataset.id = event.target.dataset.id;
});
});
If you want to use this with a "standard for loop", you can do this:
const myVideo = document.querySelector('.video');
const buttons = document.querySelectorAll('button.cover');
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function (event) {
myVideo.dataset.id = event.target.dataset.id;
});
}
// or
for (const button of buttons) {
button.addEventListener('click', function (event) {
myVideo.dataset.id = event.target.dataset.id;
});
}

javascript object method recursively call [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
My question is related to the play function. How can I call this Player.play() method recursively call?
Using this.player.play() is not working.
function Player(playlist){
open:function(){
//doing some stuff here
}
play:function(){
if(picture){
//document.getElementById("img").src =playlist[n]
}
}
}
var player = new Player([link1, link2, link3]);
document.getElementById("play-btn").addEventListener("click", player.play())

At first, your syntax is a comvination of a function and a class, you may use a class like:
class Player {
constructor(links,element){
this.images = links;
this.position = 0;
this.element = element;
}
//...
}
Then you can set an Interval that shows one image after another:
next(){
this.element.src = this.images[
this.position = (this.position + 1) % this.images.length
];
}
play(){
if(!this.interval) this.interval = setInterval(_=>this.next(),1000);
}
stop(){
clearInterval(this.interval);
this.interval = null;
}
Now you can do:
var player = new Player(
["1.jpg","2.jpg","3.jpg"],
document.getElementById("img")
);
document
.getElementById("play-btn")
.addEventListener("click", _=>player.play());

If you want to do recursive there should be a stop condition.
this.player.play() is not correct.Should be this.play()

Javascript setInterval is not running [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
the following code returns nothing. Is there something I am missing here? Shouldn't this say 'hi' twice...
Thanks in advance
var done = 1;
var id;
id = setInterval(function() {
if(done > 3) {
console.log('hi');
done++;
} else {
clearInterval(id);
}
}, 500);

The if statement in the interval, directly terminated the interval because 1 > 3 == false
var done = 1;
var id;
id = setInterval(function() {
if(done < 3) {
console.log('hi');
done++;
} else {
clearInterval(id);
}
}, 500);

What does the false in addEventListener('click', stopEvent, false) mean? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
What does the third argument 'false' represent in the last line of the bellow code?
var parent = document.getElementById('parent'),
child = document.getElementById('child'),
op = document.getElementById('op'),
op2 = document.getElementById('op2');
parent.addEventListener('click', function () {
op.innerHTML += '<p>click registered</p>';
}, false);
function stopEvent (e) {
e.stopPropagation();
op2.innerHTML += '<p>propagation stopped</p>';
}
child.addEventListener('click', stopEvent, false);

if it is true it would be considered at the beginning of the all other added function (it is called captured), if not it would be just simply add to the end of list (called bubbled), let's say you have:
parent.addEventListener('click', function () { console.log("nocapture1"); }, false);
parent.addEventListener('click', function () { console.log("usecapture1"); }, true);
parent.addEventListener('click', function () { console.log("nocapture2"); }, false);
parent.addEventListener('click', function () { console.log("usecapture2"); }, false);
then once it is clicked, you would have them with this order in the console:
usecapture1
usecapture2
nocapture1
nocapture2

It specifies whether or not you want to capture the event. In this case, it isn't necessary because it defaults to false anyway. See the MDN documentation for element.addEventListener for more information.

How do I get a variable in the event handler? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
How do I get something from the for-loop in the event handler?
This json array
var elements = [ { "id": "#id1", "name": "text1" }, { "id": "#id2", "name": "text2" } ];
is passed to that function
function setHandlers(elements) {
for (var i = 0; i < elements.length; i++) {
$(document).on("focusout", elements[i].id, function() {
alert(elements[i].id); // doesn't work because 'element' isn't
// defined.
});
}
}
How can I access elements without defining it outside the function?
EDIT: types should be elements

Your code should look like that:
function setHandlers(elements) {
for (var i = 0; i < elements.length; i++) {
(function(i){
$(document).on("focusout", elements[i].id, function() {
alert(elements[i].id);
});
})(i);
}
}
You need an anonymous function to keep the i value in every loop. I.e. putting it in separate context fix the problem.

The problem is because of the closure variable i. You can use it by using a local closure
function setHandlers(elements) {
$.each(types, function(idx, obj){
$(document).on("focusout", obj.id, function() {
alert(obj.id); // doesn't work because 'element' isn't
// defined.
});
})
}
Note: You are iterating types, is it a mistake?