We Keep Coding

how do i run a javascript function that can interchange text from two different divs?

so i am building a defi app. it has three divs at the top and a table below(there is a main div which is larger than the other 2). i want to make so when i click on one div it becomes the main div and all the text from the large one switches to one of the smaller box. so far i can only move text from div 1 to div 2 but cant figure out how to move text from div 2 to div 1 in the same onclick event. please help.
<div class="row stats-row border rounded">
<div class="col-8 stats1" id="stats1">
<div class="stats1-title-amount" id="stats1-title-amount">
<div class="stats1-title">
Total Volume
</div>
<div class="stats1-amount">
$20,000,000
</div>
</div>
</div>
<div class="col-4">
<div class="row stats2a border rounded" id="stats2a">
<div class="stats2a-title-amount" id="stats2a-title-amount">
<div class="stats2-title">
Total gains
</div>
<div class="stats2-amount">
15%
</div>
</div>
</div>
<div class="row stats2b border" id="stats2b">
<div class="stats2b-title-amount" id="stats2b-title-amount">
<div class="stats2-title">
Total Volume Traded
</div>
<div class="stats2-amount">
$1,500,560
</div>
</div>
</div>
</div>
</div>
document.getElementById('stats2a').addEventListener('click', function(){
changePage1();
changePage2();
});
function changePage1 () {
document.body.style.background = 'red';
document.getElementById('stats1-title-amount').innerText = document.getElementById('stats2a-title-amount').innerText;
}
function changePage2 () {
document.body.style.background = 'red';
document.getElementById('stats2a-title-amount').innerText = document.getElementById('stats1-title-amount').innerText;
}

Use this:
document.getElementById('stats2a').addEventListener('click', function(){
const page1 = getpage1text();
const page2 = getpage2text();
changePage1(page2);
changePage2(page1);
});
function getpage1text(){
return(document.getElementById('stats1-title-amount').innerText);
}
function getpage2text(){
return(document.getElementById('stats2a-title-amount').innerText);
}
function changePage1 (text) {
document.body.style.background = 'red';
document.getElementById('stats1-title-amount').innerText = text;
}
function changePage2 (text) {
document.body.style.background = 'red';
document.getElementById('stats2a-title-amount').innerText = text;
}

document.getElementById('stats2a').addEventListener('click', function(){
let tmp = document.getElementById('stats1-title-amount').innerText;
document.getElementById('stats1-title-amount').innerText = document.getElementById('stats2a-title-amount').innerText;
document.getElementById('stats2a-title-amount').innerText = tmp;
document.body.style.background = 'red';
});
The problem you had is that you set the value of stats1 to the value stats2, and after that you set stats2 to stats1. These run one after each, you cannot run them at the same time, so in the second assignment the stats2 is already overwritten by the first assignment, so you have to store one of the values in a variable temporarily.

you can just define visibiliy for each div instead of moving content :
var visible = true;
function(){
document.getElementById('div1').style.visibility = visible ? 'hidden' : 'visible'; // use short if/else to decide which value to user
document.getElementById('div2').style.visibility = visible ? 'visible' : 'hidden'; // short if/else is called ternairy
visible = !visible; // reverse the value of itself
}

How to reuse a piece of Javascript multiple times in one page

I'm new to building websites and have a (probably quite basic) question about using a Javascript function that's been written for a slideshow. I have a one-page website which uses multiple slideshow units – made up of the slideshow div, holder and a counter (e.g. 1/4), all of which is controlled by the following js:
var currentSlide = 0
var totalSlides = $('.holder div').length
var nextSlide = function() {
console.log('nextSlide')
currentSlide = currentSlide + 1
if (currentSlide >= totalSlides) {
currentSlide = 0
}
var leftPosition = (-currentSlide * 100) + 'vw'
$('.holder').css('left', leftPosition)
var slideNumber = currentSlide + 1
$('.steps').text(slideNumber + '/' + totalSlides)
}
var prevSlide = function() {
currentSlide = currentSlide - 1
if (currentSlide < 0) {
currentSlide = totalSlides - 1
}
var leftPosition = (-currentSlide * 100) + 'vw'
$('.holder').css('left', leftPosition)
var slideNumber = currentSlide + 1
$('.steps').text(slideNumber + '/' + totalSlides)
}
var autoSlide = setInterval(function() {
nextSlide()
}, 100000000)
$('.next').on('click', function() {
clearInterval(autoSlide)
nextSlide()
})
$('.prev').on('click', function() {
clearInterval(autoSlide)
prevSlide()
})
var slideNumber = currentSlide + 1
$('.steps').text(slideNumber + '/' + totalSlides)
$('body').on('keydown', function(event) {
var keyCode = event.keyCode
if (keyCode == 37) {
clearInterval(autoSlide)
prevSlide()
}
if (keyCode == 39) {
clearInterval(autoSlide)
nextSlide()
}
})
My set up in HTML is this:
<main class="scroll-container">
<section id="project-1" class="toxic-yellow">
<div class="slideshow">
<div class="holder">
<div class="slide-1 image next"><img src="images/01.jpg"></div>
<div class="slide-2 image next">
<p class="project-text">
Project 1, 3D, 2020<br>
Insert the project text here insert the project text here insert the project text here insert the project text here insert the project text here
</p>
</div>
<div class="slide-3 image next"><img src="images/05.jpg"></div>
<div class="slide-4 image next"><img src="images/02.jpg"></div>
<div class="slide-5 image next"><img src="images/04.jpg"></div>
<div class="slide-6 image next"><img src="images/06.jpg"></div>
</div>
</div>
<p class="caption">Project 1</p>
<p class="steps"></p>
</section>
<section id="project-2" class="lilac">
<div class="slideshow">
<div class="holder">
<div class="slide-1 image next"><img src="images/05.jpg"></div>
<div class="slide-2 image next">
<p class="project-text">
Project 1, 3D, 2020<br>
Insert the project text here insert the project text here insert the project text here insert the project text here insert the project text here
</p>
</div>
<div class="slide-3 image next"><img src="images/05.jpg"></div>
<div class="slide-4 image next"><img src="images/02.jpg"></div>
<div class="slide-5 image next"><img src="images/04.jpg"></div>
<div class="slide-6 image next"><img src="images/06.jpg"></div>
</div>
</div>
<p class="caption">Project 2</p>
<p class="steps"></p>
</section>
And so on. I have 12 slideshows in total on the same page. The problem I'm encountering is that the script applies globally across the whole page but I'd like to control each slideshow independently of each other. Is there a way to reuse this script and apply it separately to each instance of the slideshow?
Thanks for your help!

You can use JavaScript Functions or Classes.
W3Schools Reference Functions
W3Schools Reference Classes

$('body').on('keydown', function(event)
With this you are applying change to all of the elements.
Judging by your code, you can trigger the event listener to change the slides only to the child elements of the parent element(section) which has id of "project-X". Have a look here

Js on scroll event scroll to next/previous div

I'm trying to make a website scroll divs. When a visiter wants to scroll it should automatically go to the next or previous div.
Below you can see how my html looks like.
<body>
<header>
</header>
<div id="content">
<div id="contentv1">
</div>
<div id="contentv2">
</div>
<div id="contentv2">
</div>
<div id="contentv2">
</div>
<div id="contentv3">
</div>
</div>
</body>
I'm trying it with the following code:
(function() {
var scrollTo = function(element) {
$('html, body').animate({
scrollTop: element.offset().top
}, 500);
}
$('body').mousewheel(function(event) {
event.preventDefault();
var $current = $('#content > .current');
if ($current.index() != $('#content > div').length - 1) {
$current.removeClass('current').next().addClass('current');
scrollTo($current.next());
}
});
$('body').mousewheel(function(event) {
event.preventDefault();
var $current = $('#content > .current');
if (!$current.index() == 0) {
$current.removeClass('current').prev().addClass('current');
scrollTo($current.prev());
}
});
})();
The header has an height of 10% and sticks to the top. The content divs have a height of 90%. So when scrolled the top of the content divs should aline with the bottom of the header.
Can anyone help me into the right direction?

Image Slider Nav Links Jump to Anchor DIVs

I'm doing some work on a site I didn't build, and I'm running into an issue where the nav links for an image slider are making the browser jump to the DIV with that ID tag. It seems to be treating the nav links like anchor links to the DIVs, is there a way to keep the slider functionality, but disable the browser from jumping to those DIVs?
Here's the HTML:
<div class='slide-selectors'>
<div class="homepage-featured">Link 1</div>|
<div class="homepage-featured">Link 2</div>|
<div class="homepage-featured">Link 3</div>|
<div class="homepage-featured">Link 4</div>|
<div class="homepage-featured">Link 5</div>
</div>
<div id="homepage-slides">
<div id="image1" class="sliderContainer">
<img src="/img/img-01.jpg" width="1160" height="200"/>
</div>
<div id="image2" class="sliderContainer">
<img src="/img/img-02.jpg" width="1160" height="200"/>
</div>
<div id="image3" class="sliderContainer">
<img src="/img/img-03.jpg" width="1160" height="200"/>
</div>
<div id="image4" class="sliderContainer">
<img src="/img/img-04.jpg" width="1160" height="200"/>
</div>
<div id="image5" class="sliderContainer">
<img src="/img/img-05.jpg" width="1160" height="200"/>
</div>
</div>
And here's the JavaScript:
var $ = jQuery.noConflict();
var initialize;
function AnimateSlide(newSlide){
var clickedSlide = typeof newSlide !== 'undefined' ? newSlide : "auto";
// console.log("passed DOM id or auto ",clickedSlide);
var currentSlideId, currentSlideDOM, nextSlideId;
var nextSlideDOM = newSlide;
var slideCount = 0;
/* current slide check */
$('.slide-selectors').children('.homepage-featured').children('.tab').each(function(){
slideCount++;
if( $(this).hasClass('active') ) {
currentSlideDOM = $(this).attr('href');
$(this).removeClass('active');
currentSlideId = slideCount;
//console.log("active found: DOM", currentSlideDOM,"id", currentSlideId);
}
$(currentSlideDOM).hide();
});
/* end of current slide check */
// console.log("after loop: current active slide DOM",currentSlideDOM,"id", currentSlideId,"count", slideCount);
/* start of automation check */
if(clickedSlide != "auto" ) {
nextSlideDom = clickedSlide;
nextSlideId = parseInt(clickedSlide.replace("#image", ""));
// console.log('slide set to', nextSlideDOM, nextSlideId);
}
else {
if (currentSlideId == slideCount) {
nextSlideId = 1;
}
else {
nextSlideId = currentSlideId + 1;
}
$('#image' + currentSlideId).hide();
nextSlideDOM = "#image" + nextSlideId.toString();
// console.log("automated slide transition: new slide DOM", nextSlideDOM,"id", nextSlideId,"last slide id", currentSlideId);
}
/* end of automation check */
var nextSelectorId = "#slide-selector-" + (nextSlideId);
$(nextSlideDOM).show(); /* add active class to next slide */
$(nextSelectorId).addClass('active'); //.html(nextSelectorHTML);
};
function initializeSlides() {
var slideCount = 0;
$('.slide-selectors').children('.homepage-featured').children('.tab').each(function(){
slideCount++;
});
$('#homepage-slides').children('div').each(function() {
$(this).hide();
});
nextSlideId = Math.floor(Math.random()*(slideCount)) + 1;
nextSlideDOM = "#image" + nextSlideId.toString();
//console.log("random slide transition: new slide DOM", nextSlideDOM,"id", nextSlideId);
var nextSelectorId = "#slide-selector-" + (nextSlideId);
$(nextSlideDOM).show();
$(nextSelectorId).addClass('active');
//console.log("random slide transition: new slide DOM", nextSlideDOM,"id", nextSlideId, nextSelectorId);
initialize = false;
};
jQuery(document).ready(function($){
/******************** HOMEPAGE BANNER *************************
-show and hide the different featured items in the homepage banner section
-same function utilized for hiding and showing content in product tabs
*/
initialize = true;
initializeSlides();
setInterval(function() {
AnimateSlide();
},rSpeed);
$('.tab').click(function (e) {
var clickedSelector = $(this).attr('href');
AnimateSlide(clickedSelector);
});
});

You need to prevent the default action for the click event:
$('.tab').click(function (e) {
e.preventDefault();
var clickedSelector = $(this).attr('href');
AnimateSlide(clickedSelector);
});

Slideshow that increases z-index and decreases opacity

First time posting, please bear with me.
I'm trying to create a slideshow that:
assigns a z-index to each <section>
sets all slides with an opacity of 0.7
assigns the currently top slide an opacity of 1
Here is the HTML:
<div id="slides">
<section class="slide">
<article>
<h1>6</h1>
</article>
</section>
<section class="slide">
<article>
<h1>5</h1>
</article>
</section>
<section class="slide">
<article>
<h1>4</h1>
</article>
</section>
<section class="slide">
<article>
<h1>3</h1>
</article>
</section>
<section class="slide">
<article>
<h1>2</h1>
</article>
</section>
<section class="slide">
<article>
<h1>1</h1>
</article>
</section>
</div>
<div id="prev">
←
</div>
<div id="next">
→
</div>
Here is the JS so far:
$(document).ready(function() {
var z = 0;
var inAnimation = false;
$('section.slide').each(function() {
z++;
$(this).css('z-index', z);
});
function swapFirstLast(isFirst) {
if(inAnimation) return false;
else inAnimation = true;
var processZindex, direction, newZindex, inDeCrease;
if(isFirst) {
processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1;
} else {
processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1;
}
$('section.slide').each(function() {
if($(this).css('z-index') == processZindex) {
$(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() {
$(this).css('z-index', newZindex)
.animate({ 'top' : '0' }, 'slow', function() {
inAnimation = false;
});
});
} else {
$(this).animate({ 'top' : '0' }, 'slow', function() {
$(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease);
});
}
return false;
}
$('#next a').click(function() {
return swapFirstLast(true);
});
$('#prev a').click(function() {
return swapFirstLast(false);
});
});
});
I thought I could insert the following code into the script:
if($(this).css('z-index') == processZindex) {
$(this).css('opacity', 1);
} else {
$(this).css('opacity', 0.7);
}
The problem is I can't seem to get the opacity at 1 to keep up with the z-index value of 6. So I thought about writing $(this).css('z-index') == processZindex as $(this).css('z-index') != 6 but the issue occurs.
Is there a simpler way to code this?

I just used the ordering of elements instead of z-index, using appendTo,preprendTo:
http://jsfiddle.net/jtbowden/RAT8N/1/
I couldn't decide if one function or separate functions was better. Here is two separate functions:
http://jsfiddle.net/jtbowden/5LJcA/3/
Is that what you are going for?