We Keep Coding

How can I change an image when I click on another image? (Without onclick)

I´m doing a landing page and wanted to make the main image change when I click on other images. I´ve tried with this
<div class="thumb">
<ul>
<li>
<img id="img1" class="smallImg coupe" src="./assets/smallCar1.png" alt="small img">
</li>
</ul>
<ul>
<li>
<img id="img2" class="smallImg" src="./assets/smallCar2.png" alt="small img">
</li>
</ul>
<ul>
<li>
<img id="img3" class="smallImg" src="./assets/smallCar3.png" alt="small img">
</li>
</ul>
</div>
function imageChange() {
let picDefault = document.getElementById("img");
if ((picDefault = "img")) {
picDefault.src = "./assets/img1.png";
}
}
picDefault.addEventListener(click, imageChange);

Sample code for updating an image by clicking on another image. Use case might be completely different.
const thumps = document.getElementsByClassName("thump"); // secondary images
const main = document.getElementById("main");
for(let i = 0; i < thumps.length; i ++) {
const el = thumps[i]
el.addEventListener("click", function(e) { // add click handler
const elem = e.target;
main.src = elem.src;
})
}
#main {
max-width: 300px;
}
.thump {
width: 100px;
margin: 4px;
padding: 2px;
border: 1px solid #ccc;
display: inline-block;
}
<div>
<h5>Main Image</h5>
<img src="https://images.unsplash.com/photo-1644243019151-0bb97ce1af84" id="main"/>
</div>
<h5>Click Images below thumpnails to update main image</h5>
<div class="row">
<img src="https://images.unsplash.com/photo-1644235279538-4cc7cbdca6a8" class="thump">
<img src="https://images.unsplash.com/photo-1643443026948-c17b9bb16758" class="thump">
<img src="https://images.unsplash.com/photo-1644243019151-0bb97ce1af84" class="thump">
</div>

How toggle elements inside this intersection observer?

I have a few elements I want to toggle wth a function, but by some reason I can't make it work. When the toggle function is executed, the console logs "cannot read the property classList of Undefined". But if I log them before the function starts I can see the elements.
Javascript
const toggle = element => {
element.classList.toggle('toggle');
};
let numberOfProyects = document.getElementsByClassName('portfolio__item'),
proyects = [],
for (var i = 0; i < numberOfProyects.length; i++) {
proyects[i] = document.getElementById(`proyect${i+1}`);
console.log(proyects[i]);
new IntersectionObserver(()=>{
toggle(proyects[i])
},{threshold: .6}).observe(proyects[i]);
};
HTML
<div class="portfolio__item toggle" id="proyect1">
<h3 class="portfolio__item-title">Podomoro Timer</h3>
<img class="portfolio__item-img" src="assets/images/Captura de pantalla (316).png">
<div class="portfolio__item-links">
<div class="overlay portfolio__item-links-overlay">
<a target="_blank" href="https://js-codetalker.github.io/Timer/" class="portfolio__item-links-overlay-link">
<img src="assets/images/world.svg" class="portfolio__item-links-overlay-link-img">
<p class="portfolio__item-links-overlay-link-txt">Go proyect</p>
</a>
</div>
<div class="overlay portfolio__item-links-overlay">
<a target="_blank" href="https://github.com/Js-codetalker/Timer" class="portfolio__item-links-overlay-link">
<img src="assets/images/github.svg" class="portfolio__item-links-overlay-link-img">
<p class="portfolio__item-links-overlay-link-txt">Go github</p>
</a>
</div>
</div>
</div>
<div class="portfolio__item toggle" id="proyect2">
<h3 class="portfolio__item-title">Sample Restaurant</h3>
<img class="portfolio__item-img" src="assets/images/Captura de pantalla (317).png">
<div class="portfolio__item-links">
<div class="overlay portfolio__item-links-overlay">
<a target="_blank" href="https://js-codetalker.github.io/restaurant-example/" class="portfolio__item-links-overlay-link">
<img src="assets/images/world.svg" class="portfolio__item-links-overlay-link-img">
<p class="portfolio__item-links-overlay-link-txt">Go proyect</p>
</a>
</div>
<div class="overlay portfolio__item-links-overlay">
<a target="_blank" href="https://github.com/Js-codetalker/restaurant-example" class="portfolio__item-links-overlay-link">
<img src="assets/images/github.svg" class="portfolio__item-links-overlay-link-img">
<p class="portfolio__item-links-overlay-link-txt">Go github</p>
</a>
</div>
</div>
</div>
What I want is to create a different observer for each element in order to remove the class "toggle" when it reach the expected space in the viewport

(almost) Always use let instead of var when defining variables inside for loops
Also, you don't need store your elements in second array.
const toggle = element => {
element.classList.toggle('toggle');
console.log(element);
};
const proyects = document.getElementsByClassName('portfolio__item');
for (let i = 0; i < proyects.length; i++) {
new IntersectionObserver(() => {
toggle(proyects[i])
}, {
threshold: .6
}).observe(proyects[i]);
};
.container
{
border: 1px solid black;
resize: both;
overflow: auto;
width: 20em;
height: 10em;
}
.container > :after
{
content: attr(id) " class is " attr(class);
}
.container > :not(.toggle) {
background-color: pink;
}
.container >.toggle {
background-color: lightgreen;
}
<div class="container">
<div class="portfolio__item toggle" id="proyect1">
<h3 class="portfolio__item-title">Podomoro Timer</h3>
</div>
<div class="portfolio__item" id="proyect2">
<h3 class="portfolio__item-title">Sample Restaurant (has not toggle by default)</h3>
</div>
<div class="portfolio__item toggle" id="proyect3">
<h3 class="portfolio__item-title">test</h3>
</div>
<div class="portfolio__item toggle" id="proyect4">
<h3 class="portfolio__item-title">test</h3>
</div>
</div>

Finding attributes .on("click") from unrelated div

I'm trying to have it where pressing "btn1" alone populates the sidebar. I tried $("#container").on("click", ".btn1", function() but it doesn't work.
$("#container").on("click", ".item", function() {
$("#title").text($(this).find(".title").text());
var itemImgSrc = $(this).find(".image").attr("src");
$("#image")
.css("background-image", 'url("' + itemImgSrc + '")')
.css("background-repeat", "no-repeat");
});
#container {
display: flex;
height: 100px;
}
.image {
height: 100px;
}
#image {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<!-- Item 1 -->
<div class="item">
<button class="btn1"></button>
<div class="title">Dog</div>
<img class="image" src="http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg">
</div>
<!-- Item 2 -->
<div class="item">
<button class="btn1"></button>
<div class="title">Cat</div>
<img class="image" src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx">
</div>
<!-- Sidebar Div -->
</div>
<div class="modal">
<h2 id="title"></h2>
<div id="image"></div>
</div>

.title and .image are not contained in .btn1. You need to go up to the containing .item and then find them.
$("#container").on("click", ".btn1", function() {
var item = $(this).closest(".item");
$("#title").text(item.find(".title").text());
var itemImgSrc = item.find(".image").attr("src");
$("#image")
.css("background-image", 'url("' + itemImgSrc + '")')
.css("background-repeat", "no-repeat");
});
#container {
display: flex;
height: 100px;
}
.image {
height: 100px;
}
#image {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<!-- Item 1 -->
<div class="item">
<button class="btn1"></button>
<div class="title">Dog</div>
<img class="image" src="http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg">
</div>
<!-- Item 2 -->
<div class="item">
<button class="btn1"></button>
<div class="title">Cat</div>
<img class="image" src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx">
</div>
<!-- Sidebar Div -->
</div>
<div class="modal">
<h2 id="title"></h2>
<div id="image"></div>
</div>
You could also use $(this).siblings(".title') and $(this).siblings(".image").

You need to change $(this) to $(.btn1).
$(this) being the button clicked works for .btn1 and not for .btn2, changing it from dynamic $(this) to always looking for .link in .btn1 should solve it.

Have you tried using $(this).parent().find(".title"). You could move up the heirarchy and get the element from there and then
$("#container").on("click", ".item", function() {
$("#title").text($(this).parent().find(".title").text());
var itemImgSrc = $(this).parent().find(".image").attr("src");
$("#image")
.css("background-image", 'url("' + itemImgSrc + '")')
.css("background-repeat", "no-repeat");
});
#container {
display: flex;
height: 100px;
}
.image {
height: 100px;
}
#image {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<!-- Item 1 -->
<div class="item">
<button class="btn1"></button>
<div class="title">Dog</div>
<img class="image" src="http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg">
</div>
<!-- Item 2 -->
<div class="item">
<button class="btn1"></button>
<div class="title">Cat</div>
<img class="image" src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx">
</div>
<!-- Sidebar Div -->
</div>
<div class="modal">
<h2 id="title"></h2>
<div id="image"></div>
</div>
Also try using an index with the find method. it returns an array but i dont think that giving index is necessary when there is only one element.
something like this
$(this).parent().find(".item")[0].text();

Gallery of floated items. I want to add a class between the lines using jquery

So i will try to explain bit more into detail.
So I've got a gallery with 9 elements floated left creating 3 elements per line like this:
1 2 3 <--line 1
4 5 6 <--line 2
7 8 9 <--line 3
What i am trying to do is when i click on either element i want to add a div bellow the line its part of. For example if i click on element 2 it should add a div after the 3rd element between line 1 and 2.
I tried selecting all the 3rd elements of the line (using :nth-child) but i cant make jquery understand on which line it is.
To be honest i am really confused about how to approach this.
Any ideas would be tremendously helpful.
Thank you.
Constantin Chirila
Later edit:
The code is a mess and its part of a bigger thing so sorry for that.
<a href="#" class="dealer--item" data="hongkong">
<h4 class="dealer--item-title">Hong Kong</h4>
</a>
<a href="#" class="dealer--item" data="australia">
<h4 class="dealer--item-title">Sweden</h4>
</a>
<a href="#" class="dealer--item" data="sweden">
<h4 class="dealer--item-title">Sweden</h4>
</a>
<a href="#" class="dealer--item" data="uk">
<h4 class="dealer--item-title">United kingdom</h4>
</a>
<a href="#" class="dealer--item" data="germany">
<h4 class="dealer--item-title">Germany</h4>
</a>
<a href="#" class="dealer--item" data="netherlands">
<h4 class="dealer--item-title">The Netherlands</h4>
</a>
<a href="#" class="dealer--item" data="canada">
<h4 class="dealer--item-title">Canada</h4>
</a>
<a href="#" class="dealer--item" data="malaysia">
<h4 class="dealer--item-title">Malaysia</h4>
</a>
<a href="#" class="dealer--item" data="thailand">
<h4 class="dealer--item-title">Thailand</h4>
</a>
<a href="#" class="dealer--item" data="japan">
<h4 class="dealer--item-title">Japan</h4>
</a>
<a href="#" class="dealer--item" data="korea">
<h4 class="dealer--item-title">Korea</h4>
</a>
<a href="#" class="dealer--item" data="indonesia">
<h4 class="dealer--item-title">Indonesia</h4>
</a>
<a href="#" class="dealer--item" data="taiwan">
<h4 class="dealer--item-title">Taiwan</h4>
</a>
</div>
Jquery:
$(".dealer--item").click(function (e) {
var idSelector = $(this).attr('data');
e.preventDefault();
$('.dealer--item').not(this).removeClass('is-selected');
$(this).toggleClass("is-selected");
$(".dealer--item:nth-child(3n)").each(function (index) {
$(this).addClass("foo" + index);
});
$('foo0').after($('#' + idSelector)) //this is where i lost it as its not working for other 6 elements
$('#' + idSelector).fadeToggle(300);
});
And content that needs to be added between the lines based on the element clicked.
<div class="dealer--address" id="australia">
Address here
</div>
<div class="dealer--address" id="hongkong">
Address here
</div>
<div class="dealer--address" id="sweden">
Address here
</div>
<div class="dealer--address" id="uk">
Address here
</div>
<div class="dealer--address" id="germany">
Address here
</div>
etc...

Have you considered adding an extra div below the floated left elements and just hiding them initially with display:none; and then using jQuery to show them using the on click function.
$("#clickable element").click(function(){
$("element to show").show();
});
This is the way I do all of my click and display behaviors with jQuery.

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
.floating {
float: left;
width: 30%;
margin: 1%;
height: 100px;
background: #ffe4c4;
}
.Content {
display:none;
width: 100%;
background: green;
}
#contentOnDisplay {
min-height: 100px;
width: 100%;
float: left;
background: green;
display: block;
}
</style>
</head>
<body>
<div class="Content" id="floating1Content">content for 1</div>
<div class="Content" id="floating2Content">content for 2</div>
<div class="Content" id="floating3Content">content for 3</div>
<div class="Content" id="floating4Content">content for 4</div>
<div class="Content" id="floating5Content">content for 5</div>
<div class="Content" id="floating6Content">content for 6</div>
<div class="Content" id="floating7Content">content for 7</div>
<!-- <div class="Content" id="floating8Content">content for 8</div>
<div class="Content" id="floating9Content">content for 9</div>-->
<div class="floating" id="floating1"></div>
<div class="floating" id="floating2"></div>
<div class="floating" id="floating3"></div>
<div class="floating" id="floating4"></div>
<div class="floating" id="floating5"></div>
<div class="floating" id="floating6"></div>
<div class="floating" id="floating7"></div>
<!-- <div class="floating" id="floating8"></div>
<div class="floating" id="floating9"></div>-->
<script type="text/javascript">
var getLeftMostPositionOfFirstItem = $("#floating1").position().left;
$(document).ready(function() {
$(".floating").click(function() {
var elementID = $(this).attr("id");
$("#contentOnDisplay").remove(); //hides the existing contents
var firstItemOFNextRow = getTheFirstItemOfNextRow(elementID);
getAllTheConstentsOfAdivAndPrepenedIt(firstItemOFNextRow, getTheIdOfFirstItemOfNextRow(elementID));
return false;
});
});
function getTheFirstItemOfNextRow(clickedItemID) {
var getTheIdNumberOfThisItem = parseInt(clickedItemID.replace("floating", ""));
var position = $("#" + clickedItemID).position();
var idOfTheElementToBeInstertedBefore = "";
for (var i = getTheIdNumberOfThisItem + 1; i < $(".floating").length; i++) {
var leftPostitonOfThisItem = $("#floating" + i).position().left;
if (leftPostitonOfThisItem < getLeftMostPositionOfFirstItem*1.5) {
idOfTheElementToBeInstertedBefore = "#floating" + i;
break;
}
}
if (idOfTheElementToBeInstertedBefore.length == "") {
idOfTheElementToBeInstertedBefore = "#floating" + $(".floating").length;
}
return idOfTheElementToBeInstertedBefore;
};
function getTheIdOfFirstItemOfNextRow(elementID) {
return parseInt(elementID.replace("floating", ""));
};
function getAllTheConstentsOfAdivAndPrepenedIt(idToPrepend, IdNumber) {
var htmlOfTheContent = $("#floating" + IdNumber + "Content").html();
htmlOfTheContent = "<div id='contentOnDisplay'>" + htmlOfTheContent + "</div>";
if (IdNumber <= $(".floating").length - getNuumberOfItemsInLastRow()) {
$(idToPrepend).before(htmlOfTheContent);
} else {
$(idToPrepend).after(htmlOfTheContent);
}
return false;
};
function getNuumberOfItemsInLastRow() {
var numberOfColoumns = 0;
for (var i = $(".floating").length; i > 0; i--) {
var leftPostitonOfThisItem = $("#floating" + i).position().left;
numberOfColoumns++;
if (leftPostitonOfThisItem < getLeftMostPositionOfFirstItem * 1.5) {
break;
}
}
return numberOfColoumns;
};
</script>
</body>
</html>

How can I hide one div before opening another?

How can I make it so that only one div can be shown at a time? I've tried adding "document.getElementById(currentID).style.display='none';" in the after the else but that doesn't work.
<h5 onclick="showImage('chair')">Chair</h5>
<h5 onclick="showImage('table')">Table</h5>
<h5 onclick="showImage('long_table')">Meeting Table</h5>
<div id="chair">
<img src="images/1.jpg" height="300px"/>
<h4>Product 1</h4>
</div>
<div id="table">
<img src="images/2.jpg" height="300px"/>
<h4>Product 2</h4>
</div>
<div id="longtable">
<img src="images/3.jpg" height="300px"/>
<h4>Product 3</h4>
</div>
<script type="text/javascript">
var currentID = "";
function showImage(id){
if(currentID == id){
document.getElementById(id).style.display='none';
currentID = "";
}else{
document.getElementById(id).style.display='block';
currentID = id;
}
}
</script>

Better to add a class to your HTML and then grab the divs by their class. You can then loop through the elements to hide them all and then un-hide the one you've clicked.
Example:
var arrProducts = document.getElementsByClassName('product');
for (i = 0; i < arrProducts.length; i++) {
arrProducts[i].style.display = 'none';
}
function showImage(id) {
for (i = 0; i < arrProducts.length; i++) {
if (id == arrProducts[i].id) {
if (document.getElementById(id).style.display === 'none') {
arrProducts[i].style.display = 'block';
} else {
arrProducts[i].style.display = 'none';
}
} else {
arrProducts[i].style.display = 'none';
}
}
}
h5 {
cursor: pointer;
}
.product img {
height: 10px;
width: 10px;
}
<h5 onclick="showImage('chair');">Chair</h5>
<h5 onclick="showImage('table');">Table</h5>
<h5 onclick="showImage('long_table');">Meeting Table</h5>
<div class="product" id="chair">
<img src="images/1.jpg" height="300px" />
<h4>Product 1 (Chair)</h4>
</div>
<div class="product" id="table">
<img src="images/2.jpg" height="300px" />
<h4>Product 2 (Table)</h4>
</div>
<div class="product" id="long_table">
<img src="images/3.jpg" height="300px" />
<h4>Product 3 (Meeting Table)</h4>
</div>

While this won't help you fix things in you current code, you can actually do this without any JavaScript by abusing radiobuttons. This is quite common.
http://jsfiddle.net/mo7yppp8/
Each div needs a radio button above it, and to be enclosed within a label. This way, clicking on the div will trigger the radiobutton, deselecting any other div in the process.
<label>
<input class="divSelector" type="radio" name="divSelector" value="" />
<div>Sample text</div>
</label>
Then, all you need is some CSS to hide the radiobuttons, and some to shrink the divs which aren't right after a checked input.
.divSelector {
display: none;
}
.divSelector:checked + div {
font-size: 12pt;
}
div {
font-size: 0pt;
background-color: blue;
color: white;
overflow: clip;
padding: 2em;
height: 12px;
}
div:hover {
background-color: grey;
}

Try substituting longtable for long_table at "Meeting Table" h5
var showImage = function showImage(id) {
var active = document.getElementById(id);
active.style.display = 'block';
var notActive = document.querySelectorAll("div:not(#" + active.id + ")");
Array.prototype.slice.call(notActive)
.forEach(function(el) {
el.style.display = "none";
})
};
div[id] {
display: none;
}
<h5 onclick="showImage('chair')">Chair</h5>
<h5 onclick="showImage('table')">Table</h5>
<h5 onclick="showImage('longtable')">Meeting Table</h5>
<div id="chair">
<img src="images/1.jpg" height="300px" alt="chair" />
<h4>Product 1</h4>
</div>
<div id="table">
<img src="images/2.jpg" height="300px" alt="table" />
<h4>Product 2</h4>
</div>
<div id="longtable">
<img src="images/3.jpg" height="300px" alt="meeting table" />
<h4>Product 3</h4>
</div>

You need to rethink the logic of your function, I'm guessing this is what you meant:
var currentID = "";
function showImage(id){
if(currentID != id){
if (currentID != "") // added this test in response to JFK's comment
document.getElementById(currentID).style.display='none';
document.getElementById(id).style.display='block';
currentID = id;
}
else { // added after OP clarified the question
document.getElementById(id).style.display='none';
currentID = "";
}
}

If you have the chance to use jQuery, there is a really awesome solution possible. It would work like this:
http://jsfiddle.net/dnf6gsuL/2/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h5>Chair</h5>
<div>
<img src="images/1.jpg" height="300px"/>
<h4>Product 1</h4>
</div>
<h5>Table</h5>
<div>
<img src="images/2.jpg" height="300px"/>
<h4>Product 2</h4>
</div>
<h5 id="longtable">Meeting Table</h5>
<div>
<img src="images/3.jpg" height="300px"/>
<h4>Product 3</h4>
</div>
<script>
$("h5").click(function(eve){
$("div").each(function(){
$(this).fadeOut("fast", function(){
$(eve.target).next("div").fadeIn("fast");
});
});
});
</script>