We Keep Coding

Add and Remove Class of Tab Onscroll (If else Tab JavaScript)

I want to use scroll to add and remove a class of Tabs
When I scroll down the page, then all tab switch to active. Then, when I scroll up the page, the all tab switched to inactive.
In the current condition, when I scroll down the page, it removes the current tab class, and when I scroll up the page, it adds the active class to the first tab. But, it's not what I want. I want it when I scroll down it moves to the next tab, when I scroll up it moves to the previous tab. I think I should use the if else tab.
//Add & remove class tab, contents, & menu on click
window.addEventListener('DOMContentLoaded', ()=> {
let tabs = document.querySelectorAll('.tab');
let content = document.querySelectorAll('.content-item');
let firstTab = function(tabs) {tabs.classList.add('tab-active')};
let firstContent = function(content) {content.classList.add('content-active')};
firstTab(tabs[0]); //Already remove the ready and callback
firstContent(content[0]);
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', () => tabClick(i));
}
for (let i = 0; i < tabs.length; i++) {
window.addEventListener('scroll', () => tabScroll(i)); //Already remove the multiple scroll listeners in a loop. But, idk whether it's right or not
}
function tabClick(currentTab) {
//Remove Active Class
let prevt = document.querySelectorAll('.tab-active')[0];
let prevc = document.querySelectorAll('.content-active')[0];
prevc.classList.remove('content-active');
prevc.classList.add('content-show');
prevc.querySelector('iframe').removeAttribute('src');
setTimeout(function() {
prevc.classList.remove('content-show');
},1500);
prevt.classList.remove('tab-active');
//Add Active Class
const iframe = content[currentTab].querySelector('iframe');
tabs[currentTab].classList.add('tab-active');
content[currentTab].classList.add('content-active');
iframe.setAttribute('src', iframe.getAttribute('data-src'));
}
function tabScroll(currentTab) {
if(document.documentElement.scrollTop > 0) {
let prevt = document.querySelectorAll('.tab-active')[0];
let prevc = document.querySelectorAll('.content-active')[0];
prevc.classList.remove('content-active');
prevc.classList.add('content-show');
prevc.querySelector('iframe').removeAttribute('src');
setTimeout(function() {
prevc.classList.remove('content-show');
},1500);
prevt.classList.remove('tab-active');
//Add Active Class
const iframe = content[currentTab].querySelector('iframe');
tabs[currentTab].classList.add('tab-active');
content[currentTab].classList.add('content-active');
iframe.setAttribute('src', iframe.getAttribute('data-src'));
}
}
})
.container {
width: 100vw;
height: 400px;
}
.tabs {
display: flex;
height: 65px;
overflow: hidden;
align-items: center;
justify-content: center;
width: 100%;
}
.tab {
font-size: 16px;
padding: 5px 10px;
cursor: pointer;
}
.tab-active {
background-color: rgb(250, 97, 9);
}
.content {
width: 100%;
margin-top: 5px;
height: calc(100% - 65px);
}
.content-item {
width: 100%;
height: 100%;
display: none;
padding: 0px;
border: none;
position: absolute;
}
.content-wrapper1 {
width: 100%;
height: 100%;
}
.content-wrapper2 {
width: 100%;
height: 100%;
}
.content-wrapper3 {
width: 100%;
height: 100%;
}
.content-iframe {
height: 100%;
width: 100%;
}
.content-show {
display: flex;
animation-name: fade-out;
animation-duration: 2.5s;
}
#keyframes fade-out {
0% {
opacity: 1;
display: flex;
}
99% {
opacity: 0;
display: flex;
}
100% {
opacity: 0;
display: none;
}
}
.content-active {
display: flex;
border: none;
justify-content: center;
height: 100%;
animation-name: fade-in;
animation-duration: 2.5s;
}
#keyframes fade-in {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0.01;
}
100%{
display: block;
opacity: 1;
}
}
.content-iframe {
border: none;
padding: 0px;
margin: 0px;
width: 100vw;
height: 50vh;
}
<div class="container">
<div class="tabs">
<div class="tab">Tokyo</div>
<div class="tab">Paris</div>
<div class="tab">Washington</div>
<div class="tab">Jakarta</div>
<div class="tab">London</div>
</div>
<div class="content">
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Tokyo" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Paris" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Washington" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Jakarta" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
<div class="content-item">
<div class="content-wrapper1">
<div class="content-wrapper2">
<div class="content-wrapper3">
<iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/London" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please help me to solve this guys. Thank you so much..

How to use more than one custom javascript css carousel on same page?

I am using an image carousel which is working perfectly. Except that I can't use 2nd, 3rd carousel on same page. If I use more than one carousel on same page than the 2nd and 3rd are not working only the 1st. I am not expert and need some help if it possbile to change the code and have more than one carousel on same page? Here is the code:
Style:
/** img-carousel **/
#imgages-carousel {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
.img-carousel-container {
width: 800px;
position: relative;
}
.img-carousel {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 5px;
}
.img-carousel div {
flex: none;
scroll-snap-align: start;
width: 800px;
position: relative;
}
.img-carousel div img {
display: block;
width: 100%;
object-fit: cover;
}
.img-carousel div p {
position: absolute;
top: 0;
right: 10px;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px;
border-radius: 10px;
}
.img-carousel-container button {
position: absolute;
top: calc(50% - 15px);
transform: translateY(-50%);
border: none;
background-color: rgba(255, 193, 7, 0.7);
color: #000;
cursor: pointer;
padding: 10px 15px;
border-radius: 50%;
outline: none;
opacity: 0;
transition: all ease-in-out 0.5s;
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
.img-carousel-container:hover button {
opacity: 1;
}
.img-carousel-container button:hover {
background-color: #ffc107;
}
/** custom scrollbar **/
.img-carousel::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.img-carousel::-webkit-scrollbar-thumb {
background: #ffc107;
border-radius: 10px;
}
.img-carousel::-webkit-scrollbar-track {
background: transparent;
}
.img-carousel-container:hover .img-carousel::-webkit-scrollbar-thumb {
visibility: visible;
}
#media screen and (max-width: 800px) {
.img-carousel-container {
width: 100%;
}
.img-carousel div {
width: 100%;
}
}
Script:
const carousel = document.querySelector('.img-carousel');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
let carsouselImages = document.querySelectorAll('.img-carousel div');
//Next Carousel
const nextCarousel = () => {
if(carsouselImages[carsouselImages.length - 1]) {
carousel.scrollTo(0, 0);
}
carousel.scrollBy(300, 0);
};
nextBtn.addEventListener('click', e => {
nextCarousel();
});
//Prev Carousel
const prevCarousel = () => {
if(carsouselImages[0]) {
carousel.scrollTo(4800,0);
}
carousel.scrollBy(-300, 0);
};
prevBtn.addEventListener('click', e => {
prevCarousel();
});
// Auto carousel
const auto = true; // Auto scroll
const intervalTime = 5000;
let sliderInterval;
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
};
carousel.addEventListener('mouseover', (stopInterval) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('mouseleave', (startInterval) => {
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
}
});
//for mobile events
carousel.addEventListener('touchstart', (stopIntervalT) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('touchend', (startIntervalT) => {
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
}
});
//Debounce
var previousCall;
window.addEventListener('resize', () => {
if (previousCall >= 0) {
clearTimeout(previousCall);
}
previousCall = setTimeout(() => {
carousel.scrollBy(-300, 0);
}, 200);
});
Html:
<!-- section images carousel -->
<section id="imgages-carousel">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button id="prev"><i class="fas fa-chevron-left fa-2x"></i></button>
<button id="next"><i class="fas fa-chevron-right fa-2x"></i></button>
</div>
</section>

Here is a solution looping through the carousels. All you need to do is to make sure your styles are added. There are styles based on the id of the carousels - that needs to be added for all of them or made universal.
Here is little bit revised answer, no need to declare the functions and variables several times inside the forLoop like it was before.
What this code does it selects all carousels with the class .img-carousel and loops through them. Adding functionality to each carousel and relative buttons (based on index). The core functionality is the same only now it is added dynamically.
const carousels = document.querySelectorAll('.img-carousel');
const prevBtn = document.querySelectorAll('.prev');
const nextBtn = document.querySelectorAll('.next');
let carsouselImages = document.querySelectorAll('.img-carousel div');
//Next Carousel
const nextCarousel = (carousel) => {
if(carsouselImages[carsouselImages.length - 1]) {
carousel.scrollTo(0, 0);
}
carousel.scrollBy(300, 0);
};
//Prev Carousel
const prevCarousel = (carousel) => {
if(carsouselImages[0]) {
carousel.scrollTo(4800,0);
}
carousel.scrollBy(-300, 0);
};
// Auto carousel
carousels.forEach((carousel, index)=>{
nextBtn[index].addEventListener('click', e => {
nextCarousel(carousel);
});
prevBtn[index].addEventListener('click', e => {
prevCarousel(carousel);
});
// Auto carousel
const auto = true; // Auto scroll
const intervalTime = 5000;
let sliderInterval;
let previousCall;
if (auto) {
sliderInterval = setInterval(()=>nextCarousel(carousel), intervalTime);
};
carousel.addEventListener('mouseover', (stopInterval) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('mouseleave', (startInterval) => {
if (auto) {
sliderInterval = setInterval(()=>nextCarousel(carousel), intervalTime);
}
});
//for mobile events
carousel.addEventListener('touchstart', (stopIntervalT) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('touchend', (startIntervalT) => {
if (auto) {
sliderInterval = setInterval(()=>nextCarousel(carousel), intervalTime);
}
});
//Debounce
window.addEventListener('resize', () => {
if (previousCall >= 0) {
clearTimeout(previousCall);
}
previousCall = setTimeout(() => {
carousel.scrollBy(-300, 0);
}, 200);
});
});
/** img-carousel **/
#imgages-carousel {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
#imgages-carousel1 {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
.img-carousel-container {
width: 800px;
position: relative;
}
.img-carousel {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 5px;
}
.img-carousel div {
flex: none;
scroll-snap-align: start;
width: 800px;
position: relative;
}
.img-carousel div img {
display: block;
width: 100%;
object-fit: cover;
}
.img-carousel div p {
position: absolute;
top: 0;
right: 10px;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px;
border-radius: 10px;
}
.img-carousel-container button {
position: absolute;
top: calc(50% - 15px);
transform: translateY(-50%);
border: none;
background-color: rgba(255, 193, 7, 0.7);
color: #000;
cursor: pointer;
padding: 10px 15px;
border-radius: 50%;
outline: none;
opacity: 0;
transition: all ease-in-out 0.5s;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
.img-carousel-container:hover button {
opacity: 1;
}
.img-carousel-container button:hover {
background-color: #ffc107;
}
/** custom scrollbar **/
.img-carousel::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.img-carousel::-webkit-scrollbar-thumb {
background: #ffc107;
border-radius: 10px;
}
.img-carousel::-webkit-scrollbar-track {
background: transparent;
}
.img-carousel-container:hover .img-carousel::-webkit-scrollbar-thumb {
visibility: visible;
}
#media screen and (max-width: 800px) {
.img-carousel-container {
width: 100%;
}
.img-carousel div {
width: 100%;
}
}
<!-- section images carousel -->
<section id="imgages-carousel">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button class="prev"><i class="fas fa-chevron-left fa-2x"></i></button>
<button class="next"><i class="fas fa-chevron-right fa-2x"></i></button>
</div>
</section>
<section id="imgages-carousel1">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button class="prev"><i class="fas fa-chevron-left fa-2x "></i></button>
<button class="next"><i class="fas fa-chevron-right fa-2x "></i></button>
</div>
</section>

JavaScript code to filter and place elements starting in the top-left

I am 95% of the way done with what I would like to have this webpage do. On this page I am looking to have my search bar filter the boxed options and fill them towards the top left. Right now, the boxes filter correctly and fill upwards (not quite sure why they filter upwards), but they don't fill upwards AND to the left. Any help would be greatly appreciated!
Note: The snippet runs, but there is no container for the boxes where as squarespace naturally makes these.
function search_topics() {
let input = document.getElementById('searchbar').value
input = input.toLowerCase();
let x = document.getElementsByClassName('text');
let y = document.getElementsByClassName('overlay-image _b1')
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
y[i].style.display = "none";
} else {
y[i].style.display = "table-cell";
}
}
/* Main container */
.overlay-image {
position: relative;
width: 100%;
}
/* Original image */
.overlay-image .image {
display: block;
width: 100%;
height: auto;
}
/* Original text overlay */
.overlay-image .text {
color: #fff;
font-size: 2.0em;
text-shadow: 2px 2px 2px #000;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
/* Text on hover formatting */
.overlay-image .text_2 {
color: #fff;
font-size: 0.75em;
line-height: 1.5em;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
/* New overlay on hover */
.overlay-image .hover {
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: rgba(0, 0, 0, 0.5);
}
/* New overlay appearance on hover */
.overlay-image:hover .hover {
opacity: 1;
}
.overlay-image .normal {
transition: 0.5s ease;
}
.overlay-image:hover .normal {
opacity: 0;
}
#searchbar{
margin-left: 15%;
padding:15px;
border-radius: 10px;
width: 70%;
}
<body>
<input id="searchbar" onkeyup="search_topics()" type="text"
name="search" placeholder="Search topics....">
</body>
<div class=" overlay-image _b1 ">
<a href="url for block">
<img class=" image _b2 " src="https://i.redd.it/m3u40szpez231.jpg" />
<div class=" normal _b4 ">
<div class="text">Title of a block</div>
</div>
<div class=" hover _b3 ">
<div class=" text_2 ">Test that appears when block is hovered</div>
</div>
</a>
</div>
<div class=" overlay-image _b1 ">
<a href="url for block">
<img class=" image _b2 " src="https://i.redd.it/m3u40szpez231.jpg" />
<div class=" normal _b4 ">
<div class="text">Title of a block 2</div>
</div>
<div class=" hover _b3 ">
<div class=" text_2 ">Test that appears when block is hovered</div>
</div>
</a>
</div>

Your items move upward because the rows above are emptied of displayed content, allowing them to collapse. They don't move to the left because there are still table cells there. The problem you're having is that you're using a table to do work that tables were not designed to do. Css has a tool to do what you want called flexbox. Here's an example: https://codesandbox.io/s/tender-sky-9yyxf
<body>
<input id="search" type="text" placeholder="search"></input>
<div id="options">
<div value="coriander">Coriander</div>
<div value="anise">Anise</div>
<div value="lavender">Lavender</div>
<div value="fennel">Fennel</div>
<div value="ginger">Ginger</div>
<div value="sage">Sage</div>
<div value="cinnamon">Cinnamon</div>
</div>
<script src="src/index.js"></script>
</body>
import "./styles.css";
const search = document.getElementById("search");
if (search) {
search.addEventListener("change", event => {
if (event.target.value) {
// Normalize the search term.
const value = event.target.value.toLowerCase();
console.log(value);
// Hide all non matching elements.
document
.querySelectorAll(`#options :not([value*=${value})`)
.forEach(item => {
item.classList.add("hidden");
});
// Show all matching elements.
document.querySelectorAll(`#options [value*=${value}]`).forEach(item => {
item.classList.remove("hidden");
});
} else {
// If there are no search terms, show all elements.
document.querySelectorAll(`#options div`).forEach(item => {
item.classList.remove("hidden");
});
}
});
}
#options {
/* Set the options to fit three items in a row, and wrap them. */
display: flex;
flex-direction: row;
/* Setting max-width instead of width will allow your list to automatically adjust to smaller screen sizes. */
max-width: 70em;
flex-wrap: wrap;
}
#options div {
/* Set the items to a fixed width */
width: 20em;
border: 1px solid red;
margin: 0.5em;
text-align: center;
}
#options div.hidden {
/* Add a style to hide items when they don't apply to the search. */
display: none;
}

How do I give elements with the same class name to perform the same function in javascript?

I have multiple elements with the same class name and want them to perform the same javascript function but output their unique "inner.Text" specific
to the element i clicked. Right Now i know i need an [index] and a loop
but I just don't know how to implement that at the moment since im a novice in javascript.
spent 3 hours trying to figure it out
const myButton = document.querySelectorAll('.clipboard-icon');
const myInp = document.querySelectorAll('.snippetcode');
myButton.forEach(ree =>
ree.addEventListener('click', copyElementText));
function copyElementText(id) {
var text = myInp.innerText;
var elem = document.createElement("textarea");
document.body.appendChild(elem);
elem.value = text;
elem.select();
document.execCommand("copy");
document.body.removeChild(elem);
console.log('clicked');
}
console.log(myButton);
console.log(myInp);
/*everything works fine if the script was changed to affect only ONE class name but I cant figure out how to make them work for more than one
*/
.snippet1 {
border: solid rgb(55, 63, 184) 3px;
}
.snippet_holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
padding: 0 3.5rem;
margin: 0 0 1rem 0;
position: relative;
}
.buttons {
width: 170px;
height: 40px;
border: 0;
padding: 0;
font-size: 1rem;
color: #fff;
border-radius: 10px;
}
.snippet_holder:hover .clipboard-icon {
display: block;
position: absolute;
top: 15px;
right: 65px;
background: rgb(51, 153, 136);
margin: 0;
width: 30px;
padding: 0;
height: 30px;
}
.clipboard-icon {
display: none;
}
.clipboard-icon img {
width: inherit;
height: inherit;
position: relative;
}
.clipboard-icon pre {
display: none;
}
.snippetcode1 {
display: none;
}
.button1 {
-webkit-animation: rainbow 6.5s ease infinite;
animation: rainbow 6.5s ease infinite;
background-image: linear-gradient(124deg, #ff470f, #ff3860, #b86bff, #3273dc);
background-size: 800% 800%;
}
#keyframes rainbow {
0% {
background-position: 1% 80%;
}
50% {
background-position: 99% 20%;
}
100% {
background-position: 1% 80%;
}
0% {
background-position: 1% 80%;
}
50% {
background-position: 99% 20%;
}
100% {
background-position: 1% 80%;
}
}
main {
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<html>
<body>
<main>
<div class="snippet_holder snippet_holder1">
<div class="clipboard-icon">
<pre>
<code class= "snippetcode">
1st class text copieddddd
</code>
</pre>
<img src="https://www.shareicon.net/data/128x128/2016/04/27/756265_clipboard_512x512.png">
</div>
<button type="button" class="buttons button1">button</button>
</div>
<div class="snippet_holder snippet_holder1">
<div class="clipboard-icon">
<pre>
<code class= "snippetcode">
22222nddd class text copieddddd
</code>
</pre>
<img src="https://www.shareicon.net/data/128x128/2016/04/27/756265_clipboard_512x512.png">
</div>
<button type="button" class="buttons button1">button</button>
</div>
<div class="snippet_holder snippet_holder1">
<div class="clipboard-icon">
<pre>
<code class= "snippetcode">
3rd class text copieddddd
</code>
</pre>
<img src="https://www.shareicon.net/data/128x128/2016/04/27/756265_clipboard_512x512.png">
</div>
<button type="button" class="buttons button1">button</button>
</div>
<div class="snippet_holder snippet_holder1">
<div class="clipboard-icon">
<pre>
<code class= "snippetcode">
4thhhhhhhhclass text copieddddd
</code>
</pre>
<img src="https://www.shareicon.net/data/128x128/2016/04/27/756265_clipboard_512x512.png">
</div>
<button type="button" class="buttons button1">button</button>
</div>
</main>
</body>
</html>

You've to query the .snippetcode related to the button pressed, so, it makes no sense to query the nodeList myInp, you can access to the right element using the currentTarget provided in the event object...
function copyElementText(event) {
var text = event.currentTarget.querySelector('.snippetcode').innerText;
var elem = document.createElement("textarea");
document.body.appendChild(elem);
elem.value = text;
elem.select();
document.execCommand("copy");
document.body.removeChild(elem);
console.log('clicked');
}

Append canvas with parent's height creates scrollbars

I have problem with canvas tag. I need to append it into parent div. But when I set precise dimensions of parent and embed canvas tag, I get scrollbars. When I do same think with div, it works good. Here is fiddle:
https://jsfiddle.net/57yovrkx/4/
and here is code:
$(function() {
var content1 = $('#content1');
var div = $('<div/>', {width: content1[0].clientWidth, height: content1[0].clientHeight});
content1.append(div);
var content2 = $('#content2');
var canvas = $('<canvas/>', {width: content2[0].clientWidth, height: content2[0].clientHeight});
content2.append(canvas);
})
* {
box-sizing: border-box;
border: 0;
margin: 0;
padding: 0;
}
#wrap1, #wrap2 {
display: flex;
flex-direction: column;
position: absolute;
left: 0;
right: 0;
overflow: auto;
}
#wrap1 {
top: 0;
bottom: 50%;
}
#wrap2 {
top: 50%;
bottom: 0;
}
.header {
flex: 0 0 2rem;
background: darkgrey;
}
#content1, #content2 {
flex: 1;
}
#content1 {
background: lightblue;
}
#content2 {
background: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap1">
<div class="header">
Some header
</div>
<div id="content1">
</div>
</div>
<div id="wrap2">
<div class="header">
Some header
</div>
<div id="content2">
</div>
</div>
Does anybody knows why?

Setting canvas.style.height = '100%'; before you append the canvas seems to do the trick.
https://stackoverflow.com/a/10215724/1482623