We Keep Coding

Javascript - Carousel managed automatically and with keyboard

I'm developing an automatic and keyboard managed carousel slider but it doesn't respond when I hit the previous or back buttons in the keyboard. It works when I click the previous and next buttons, and changes automatically.
Here is my HTML and Js code:
let currentSlide = 0;
const slides = document.querySelectorAll(".picture")
//carousel
const init = (n) => {
slides.forEach((picture, index) => {
picture.style.display = "none"
})
slides[n].style.display = "block"
}
//left and right buttons
document.addEventListener("DOMContentLoaded", init(currentSlide))
const next = () => {
currentSlide >= slides.length - 1 ? currentSlide = 0 : currentSlide++
init(currentSlide)
}
const prev = () => {
currentSlide <= 0 ? currentSlide = slides.length - 1 : currentSlide--
init(currentSlide)
}
document.querySelector(".buttonleft").addEventListener('click', prev)
document.querySelector(".buttonright").addEventListener('click', next)
//each 3 seconds change picture
setInterval(() => {
next()
}, 3000);
// NAVIGATE WITH KEYS
document.keydown(function(e) {
if (e.keyCode === 37) {
// Previous
$(".buttonleft").click();
return false;
}
if (e.keyCode === 39) {
// Next
$(".buttonright").click();
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel-container">
<!-- next and prev buttons -->
<div class="navigation">
<div class="btn buttonleft">
<img src="assets/img/left.png">
</div>
<div class="btn buttonright">
<img src="assets/img/right.png">
</div>
<!-- carousel -->
<div class="carousel">
<div class="logo">
<img src="assets/img/mmlogo.png" alt="Yahoo" class="image">
</div>
<div class="picture fade">
<a href="http://www.yahoo.com" target="_blank">
<img src="assets/img/image1.png" alt="Cloudy with a Chance of Meatballs" class="image">
</a>
</div>
<div class="picture fade">
<a href="http://www.google.com" target="_blank">
<img src="assets/img/image2.png" alt="Cloudy with a Chance of Meatballs" class="image">
</a>
</div>
<div class="picture fade">
<a href="http://www.youtube.com" target="_blank">
<img src="assets/img/image3.png" alt="Cloudy with a Chance of Meatballs" class="image">
</a>
</div>
<div class="picture fade">
<a href="http://www.gmail.com" target="_blank">
<img src="assets/img/image4.png" alt="Cloudy with a Chance of Meatballs" class="image">
</a>
</div>
<div class="picture fade">
<a href="http://www.outlook.com" target="_blank">
<img src="assets/img/image5.png" alt="Cloudy with a Chance of Meatballs" class="image">
</a>
</div>
</div>
</div>
</div>
Any ideas? I don't want to use Bootstrap.
Thanks!

Looks like you're using vanilla javascript, until the last event listener. Looks like jquery.
Make it vanilla js like you did above. It works fine.
Keeping your console tools open will give you a good idea of what's wrong.
document.addEventListener('keydown', (function(e) {
if (e.keyCode === 37) {
// Previous
console.log("prev");
}
if (e.keyCode === 39) {
// Next
console.log("next");
}
}));

How do I stop this JS 'show and hide' button from revealing the content at first?

Basically, I have 3 images and once the button is clicked it displays those images, however, when the page is loading up, the button is already toggled on and displays the images, once you click on it the images go. So the button works, but it starts off with displaying the contents which is not what I want.
var a;
function show_hide()
{
if(a==1)
{
document.getElementById("image").style.display="inline";
return a=0;
}
else
{
document.getElementById("image").style.display="none";
return a=1;
}
}
<div id="image">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button onclick="show_hide()">Click to Reveal</button>
</div>
<script src="showhideelement.js"></script>

You can assign a = 1 and make your div to display none.
HTML:
<div id="image" style="display: none">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button onclick="show_hide()">Click to Reveal</button>
</div>
JS:
var a = 1;
function show_hide()
{
if(a==1)
{
document.getElementById("image").style.display="inline";
return a=0;
}
else
{
document.getElementById("image").style.display="none";
return a=1;
}
}

You can use a class to define the style which you can toggle on clicking the button using DOMTokenList.toggle().
Also, I will suggest you to avoid inline event handler.
Demo:
document.querySelector('button').addEventListener('click', show_hide);
function show_hide()
{
document.getElementById("image").classList.toggle('showHide');
}
.showHide{
display: none;
}
<div id="image" class="showHide">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button>Click to Reveal</button>
</div>
<script src="showhideelement.js"></script>

That's it just assign the value of 0 to the var before doing anything and call the function. It was that easy. I hope I solved your query you can run this code snippet to check if it works!
Thanks!
var a = 0;
show_hide()
function show_hide()
{
if(a==1)
{
document.getElementById("image").style.display="inline";
return a=0;
}
else
{
document.getElementById("image").style.display="none";
return a=1;
}
}
<div id="image">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button onclick="show_hide()">Click to Reveal</button>
</div>
<script src="showhideelement.js"></script>

Using jQuery to find the next div and show/hide it

I'm working on an application that lists products/sub products. I'm trying to show the sub products when I click on the chevron. For some reason, I can't get this to work. I've been able to get the flipping of the chevron to work.
Here is my code:
<div class="item">
Product 1
<div style="float: right;"><i class="fas fa-fw fa-chevron-down" onclick="expand(this,event)"></i></div>
<div class="sub-item-list" style="display: none">
<div class="sub-item">
Sub Product 1
</div>
</div>
</div>
function expand(event) {
if ($(event).hasClass("fa-chevron-down")){
setTimeout(function () {///workaround
$(event).removeClass("fa-chevron-down");
}, 10);
$(event).addClass("fa-chevron-up");
$(event).closest('div').next().find("sub-item-list").css('display', 'inherit');
} else {
setTimeout(function () {///workaround
$(event).removeClass("fa-chevron-up");
}, 10);
$(event).addClass("fa-chevron-down");
$(event).closest('div').next().find("sub-item-list").css('display', 'none');
}
};
Can someone tell me that the issue is?

You can use .closest('div.item') to get the closest div and then use .find(".sub-item-list") to find the div which you need to display .
Demo Code :
function expand(event) {
if ($(event).hasClass("fa-chevron-down")) {
setTimeout(function() { ///workaround
$(event).removeClass("fa-chevron-down");
}, 10);
$(event).addClass("fa-chevron-up");
//get closest div with class item -> find class
$(event).closest('div.item').find(".sub-item-list").css('display', 'inherit');
} else {
setTimeout(function() { ///workaround
$(event).removeClass("fa-chevron-up");
}, 10);
$(event).addClass("fa-chevron-down");
//get closest div with class item -> find class
$(event).closest('div.item').find(".sub-item-list").css('display', 'none');
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
Product 1
<div style="float: right;"><i class="fas fa-fw fa-chevron-down" onclick="expand(this,event)"> >> </i></div>
<div class="sub-item-list" style="display: none">
<div class="sub-item">
Sub Product 1
</div>
</div>
</div>

As you are setting onclick event on <i> tag you can also call parent().next() method instead of closest() to get subitem/product.
Try this example:
function expand(event)
{
if ($(event).hasClass("fa-chevron-down"))
{
setTimeout(function()
{///workaround
$(event).removeClass("fa-chevron-down");
}, 10);
$(event).addClass("fa-chevron-up");
$(event).parent().next().css("display", "block");
}
else
{
setTimeout(function ()
{///workaround
$(event).removeClass("fa-chevron-up");
}, 10);
$(event).addClass("fa-chevron-down");
$(event).parent().next().css('display', 'none');
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
Product 1
<div style="float: right;">
<i class="fas fa-fw fa-chevron-down" onclick="expand(this, event)">Toggle Chevron</i>
</div>
<div class="sub-item-list" style="display:none">
<div class="sub-item">
Sub Product 1
</div>
</div>
</div>

selecting elements javascript

I'm making a script that will notify you when someone is online on whatsapp web and i have this:
var onlineCheck = window.setInterval(function() {
var y = document.getElementsByClassName("emojitext ellipsify")[19];
if (y == null) {
console.log("online notification failed");
} else {
if (y.innerText === 'online') {
new Notification("contact is online");
window.clearInterval(onlineCheck);
}
}
},1000);
now the problem is that i'm selecting an element by the class "emojitext ellipsify" th 19th and if someone texts me another element with the class "emojitext ellipsify" will be made and the 19th won't be the status anymore, so i want to know if i can select an element with the same method from css which is : element>element
like this (div#main>header.pane-header pane-chat-header>div.chat-body>div.chat-status ellipsify>span.emojitext ellipsify)
or any other possible way.
var onlineCheck = window.setInterval(function() {
var y = document.getElementsByClassName("emojitext ellipsify")[19];
if (y == null) {
console.log("online notification failed");
} else {
if (y.innerText === 'online') {
new Notification("contact is online");
window.clearInterval(onlineCheck);
}
}
}, 1000);
<header class="pane-header pane-chat-header">
<div class="chat-avatar">
<div class="avatar icon-user-default" style="*somestyle*">
<div class="avatar-body">
<img src="*srcpath*" class="avatar-image is-loaded">
</div>
</div>
</div>
<div class="chat-body">
<div class="chat-main">
<h2 class="chat-title" dir="auto">
<span class="emojitext ellipsify" title="*person'sname*"><!-- react-text: 3216 -->*person'sname*<!-- /react-text --></span>
</h2>
</div>
<div class="chat-status ellipsify">
<span class="emojitext ellipsify" title="typing…"><!-- react-text: 3219 -->*the info that i need to get(typing…)*<!-- /react-text --></span>
</div>
</div>
<div class="pane-chat-controls">
<div class="menu menu-horizontal">
<div class="menu-item">
<button class="icon icon-search-alt" title="Search…"></button>
<span></span>
</div>
<div class="menu-item">
<button class="icon icon-clip" title="Attach"></button>
<span></span>
</div>
<div class="menu-item">
<button class="icon icon-menu" title="Menu"></button>
<span></span>
</div>
</div>
</div>
</header>

What you are looking for is document.querySelectorAll
With that function, you can select elements with a selector, the same used with css. So, you could do this:
document.querySelectorAll(".emojitext.ellipsify")
Or put a better selector, in order to get the desired elements, and not others.
Your example would be:
document.querySelectorAll("div#main>header.pane-header pane-chat-header>div.chat-body>div.chat-status ellipsify>span.emojitext.ellipsify")

You could use JQuery, much simpler
$('parent > child')
https://api.jquery.com/child-selector/

Changing multiple images with JQuery

So here is the JQuery I am using
jQuery(document).ready(function($) {
$('.ltwitch').each(function () {
var tnick = $(this).data('tnick');
var span = $(this).next();
$.getJSON("https://api.twitch.tv/kraken/streams/"+tnick+".json?callback=?", function(c) {
if (c.stream == null) {
span.html("Offline");
} else {
span.html("Online");
}
});
});
});
And the HTML that was with it when I found it
<a class="ltwitch" href="http://www.twitch.tv/ifstudios" data-tnick="IFStudios">IFStudios</a> (<span>...</span>)
RoosterTeeth (...)
Now what I want to do, I have HTML that looks like this
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/sweet.png" class="img-responsive" alt="">
</a>
Basically when a channel becomes live I want to switch the img src from the image I have it set to, to the same image with -online on the end. So I can have multiple pictures on the website, but I can have the images change dependent on who is live and who isn't.
So if I have
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/sweet.png" class="img-responsive" alt="">
</a>
When her channel goes live, it will turn to
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/sweet-online.png" class="img-responsive" alt="">
Or if it was
<img src="img/portfolio/carrot.png"
it would turn to
<img src="img/portfolio/carrot-online.png"
Any ideas?

Try the below code
jQuery(document).ready(function($) {
$('.ltwitch').each(function () {
var tnick = $(this).data('tnick');
var span = $(this).next();
$.getJSON("https://api.twitch.tv/kraken/streams/"+tnick+".json?callback=?", function(c) {
var img = $(img-selector);
var source = img.attr('src');
if (c.stream != null) {
// Online
if(source.indexOf('.png') != -1){
source = source.replace(".png", "-online.png");
img.attr('src',source);
}
}
else{
// Offline
source.replace("-online", "");
img.attr('src',source);
}
});
});
});
Note: You have to pass the correct image selector to $(img-selector). Also call the same function again for refreshing