We Keep Coding

Select the first element in javascript

I am beginning with JavaScript and I have a following problem. My webpage by default shows content of all <li> that is Journal Articles, Working papers and Conferences. I would like to have selected the first <li> when I come to the website, that is in this case journal Articles.
Relevant part of the HTML code:
<div class="row" data-aos="fade-up">
<div class="col-lg-12 d-flex justify-content-center">
<ul id="portfolio-flters">
<li data-filter=".filter-journal">Journal articles</li>
<li data-filter=".filter-wp">Working papers</li>
<li data-filter=".filter-conferences">Conferences</li>
</ul>
</div>
</div>
<div class="row portfolio-container" data-aos="fade-up" data-aos-delay="100">
<div class="col-lg-4 col-md-6 portfolio-item filter-journal">
Articles published in journals with IF.
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-wp">
<li>Misak, V. (2022). Crime and weather: Evidence from the Czech Republic (No. 9/2022). IES Working Paper.</li>
<br>
<li>Garcia-Bernardo, J., Jansky, P., & Misak, V. (2021). Common Agricultural Policy Beneficiaries: Evidence of Inequality from a New Data Set (No. 4/2021). IES Working Paper.</li>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-conferences">
<u> 2022: </u>
<li>Young Economists Meeting, Brno, Czech Republic</li>
<li>MAER-Net Colloquium, Kyoto, Japan</li>
</div>
</div>
Javascript function:
window.addEventListener('load', () => {
let portfolioContainer = select('.portfolio-container');
if (portfolioContainer) {
let portfolioIsotope = new Isotope(portfolioContainer, {
itemSelector: '.portfolio-item'
});
let portfolioFilters = select('#portfolio-flters li', true);
on('click', '#portfolio-flters li', function(e) {
e.preventDefault();
portfolioFilters.forEach(function(el) {
el.classList.remove('filter-active');
});
this.classList.add('filter-active');
portfolioIsotope.arrange({
filter: this.getAttribute('data-filter')
});
portfolioIsotope.on('arrangeComplete', function() {
AOS.refresh()
});
}, true);
}
});
How can I modify my JavaScript function to select the first child of by default, please?
Desired output is this:

You code was a bit hard to work with because all the classes are missing and the indents didn't format properly in your question.
I wrote below a full example for how you can achieve the tabs effect your going for below. Hope it helps! I tried to keep it simple and add comments. LMK if you have any questions :)
let currentTab = 0;
let tabItems = document.querySelectorAll('.tabItem');
let tabContents = document.querySelectorAll('.tabContent');
function updateTabs() {
// CYCLE THROUGH EACH tabItems
for (let i = 0; i < tabItems.length; i++) {
tabItems[i].className = i == currentTab ? 'tabItem tabItemSelected' : 'tabItem'; // SET TAB WITH INDEX currentTab TO INCLUDE tabItemSelected CLASS
tabContents[i].style.display = i == currentTab ? 'block' : 'none'; // ONLY SHOW THE CONTENT THAT CORRESPONDS TO INDEX currentTab
}
}
updateTabs(); // LOAD TO STATE 0 --> YOU CAN DO THIS IS document.onload for example
for (let i = 0; i < tabItems.length; i++) {
let curI = i; // CACHE i LOCALLY
tabItems[i].onclick = function() {
currentTab = curI;
updateTabs(); // UPDATE TABS ON CLICK...
}
}
.tabContainer {
width: 100%;
height: 50px;
border-bottom: 1px solid gray;
background-color: #ccc;
}
.tabItem {
display: inline-block;
width: 33.33%;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
.tabItemSelected {
color: blue;
border-bottom: 2px solid blue;
}
<div class="tabContainer">
<div class="tabItem">TAB A</div><div class="tabItem">TAB B</div><div class="tabItem">TAB C</div>
</div>
<br><br>
<div class="tabContent" style="color: red">
Content A
</div>
<div class="tabContent" style="color: blue">
Content B
</div>
<div class="tabContent" style="color: green">
Content C
</div>

Can't change divs ID of first element from <tempate>

I have this HTML template:
<template id="single_feed">
<div class="ibox" id="FIRST_DIV">
<div class="ibox-title">
<h5 id="naslov"></h5>
</div>
<div class="ibox-content">
<form method="get" _lpchecked="1">
<div class="form-group row"><label class="col-sm-2 col-form-label">Naziv</label>
</form>
</div>
</div>
</template>
Now I want to clone and change first div ID (now set to: "FIRST_DIV"). But don't know how. I am able only to change 2nd,3rd.... divs.
My jquery code for cloning is:
$(".btn-RSS-single").click(function(e) {
var idClicked = e.target.id;
const $template = $( $('#single_feed')[0].innerHTML );
$template.find("div:first").attr("id", "NEW_ID_"+idClicked);
$('#kolona_1').append($template);
});
P.S:
I removed unnecessary parts to make code more readable.

jQuery has .html() function to retrieve the inner html and .clone() function to clone the element. You can use both to achieve what you want and make the code more readable.
See this example (I have changed some values to make the example clearer):
let clicked = 0;
$(".btn-RSS-single").click(function(e) {
var idClicked = e.target.id;
idClicked = clicked++;
const template = $("#single_feed").html();
$template = jQuery(template).clone().attr("id", "NEW_ID_" + idClicked);
$('#kolona_1').append($template);
});
#kolona_1 {
border: 1px solid gray;
}
#kolona_1 > div {
background-color: rgba(180, 180, 180, 0.2);
margin: 1em;
}
.btn-RSS-single {
background-color: lightblue;
padding: 0.2em 1em;
text-align: center;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="kolona_1"></div>
<div class="btn-RSS-single">ADD</div>
<template id="single_feed">
<div class="ibox" id="FIRST_DIV">
<div class="ibox-title">
<h5 id="naslov"></h5>
</div>
<div class="ibox-content">
<form method="get" _lpchecked="1">
<div class="form-group row"><label class="col-sm-2 col-form-label">Naziv</label></div>
</form>
</div>
</div>
</template>

Hope this will helps,
const template = (document.getElementsByTagName("template")[0]).content.cloneNode(true);
const firstDiv = template.querySelector("div");
firstDiv.id = "new id";
document.body.querySelector('#kolona_1').appendChild(firstDiv);

Try something like below
$(".btn-RSS-single").click(function(e) {
var idClicked = e.target.id;
const $template = $( $('#single_feed')[0].innerHTML );
$template.find("div:first").attr("class", "template-new"+idClicked);
$('#kolona_1').append($template);
$('#kolona_1').find('.template-new' + idClicked).attr('id', 'NEW_ID_' + idClicked);
});

Targeting one of multiple Classes / only part of the Class string - className vs classList

So I'm trying to put together a Javascript toggle for my photography portfolio site. My goal is to be able to click a button labeled Show Only Sunsets and hide every image without a "Sunsets" Class. The code I've come up with below ALMOST works, but there's a major flaw:
This code only preserves the visibility of images such as "1.jpg" below whose Class is exactly/only "Sunsets" (or "NSFW," or whatever). But often I'll need to give images more than one class, for example to differentiate verticals, or images that fall into multiple categories. So I need the code to preserve the visibility of any image such as "2.jpg" below which has "Sunsets" (or whatever) anywhere in its Class.
JS:
<script>
function filterOn(imageClass) {
var image = document.getElementsByTagName('figure');
for (i = 0; i < image.length; i++) {
if (image[i].className != imageClass) {
image[i].style.display = 'none';
}
}
document.getElementById(imageClass + '-off').innerHTML = 'Undo Filter';
document.getElementById(imageClass + '-off').setAttribute('onClick', "filterOff('" + imageClass + "')");
document.getElementById(imageClass + '-off').id = imageClass + '-on';
}
function filterOff(imageClass) {
var image = document.getElementsByTagName('figure');
for (i = 0; i < image.length; i++) {
if (image[i].className != imageClass) {
image[i].style.display = 'inline-block';
}
}
document.getElementById(imageClass + '-on').innerHTML = 'Show Only ' + imageClass;
document.getElementById(imageClass + '-on').setAttribute('onClick', "filterOn('" + imageClass + "')");
document.getElementById(imageClass + '-on').id = imageClass + '-off';
}
</script>
HTML:
<ul>
<li id="Sunsets-off" onClick="filterOn('Sunsets')">Show Only Sunsets</li>
<li id="NSFW-off" onClick="filterOn('NSFW')">Show Only NSFW</li>
</ul>
<img class="Sunsets" src="1.jpg">
<img class="vertical Sunsets" src="2.jpg">
<img class="NSFW vertical" src="3.jpg">
<img class="Architectural" src="4.jpg">
<img class="Sunsets Landscapes" src="5.jpg">
<img class="Abstract" src="6.jpg">
<img class="NSFW LondonAndrews" src="7.jpg">

That test:
if (image[i].className != imageClass) {
will indeed do a check against the whole class string.
There's the classList API for doing what you want, replacing your test with:
if (!image[i].classList.contains(imageClass)) {

I would simplify it by adding a class name to all images so you can easily target all the images, then use a toggled class to hide the images you don't want to see. this also gives you the ability to use css3 animations to fade the images you don't want to see.
function filterOn( clazz ){
// get all the images using the additional img class
var images = slice(document.getElementsByClassName('img'));
// hide all the images
var ret = images.map(function( image ){
image.classList.add('hide');
return image;
})
// reduce the images to only contain those you want to show
.filter(function( image ){
return image.classList.contains( clazz );
})
// show the image by removing the hide class
.forEach(function( image ){
image.classList.remove('hide');
});
}
// show all images
function showAll(){
var images = slice(document.getElementsByClassName('img'));
images.forEach(function( image ){
image.classList.remove('hide');
});
}
// helper function to get an array from an array like object
function slice( arrayLike ){
return Array.prototype.slice.call( arrayLike );
}
.img {
display: block;
float: left;
margin-left: .8em;
border: .3em solid #aaa;
}
.hide {
display: none;
}
.filters {
display: block;
width: 100%;
float: left;
}
.Sunsets {
border: .3em solid orange;
}
.NSFW {
border: .3em solid magenta;
}
<nav class="filters">
<button id="Sunsets-off" onClick="filterOn('Sunsets')">Show Only Sunsets</button>
<button id="NSFW-off" onClick="filterOn('NSFW')">Show Only NSFW</button>
<button id="show-all" onClick="showAll()">Show All</button>
</nav>
<!-- I added an img class to the images for ease of use later -->
<section class="images">
<img class="img Sunsets" src="http://placehold.it/50/50">
<img class="img vertical Sunsets" src="http://placehold.it/50/50">
<img class="img NSFW vertical" src="http://placehold.it/50/50">
<img class="img Architectural" src="http://placehold.it/50/50">
<img class="img Sunsets Landscapes" src="http://placehold.it/50/50">
<img class="img Abstract" src="http://placehold.it/50/50">
<img class="img NSFW LondonAndrews" src="http://placehold.it/50/50">
</section>

Why all the spans are changed instead of one?

I have prev and next button:
This is function of next button:
var nextFn = function(e)
{
var current = $('.active');
alert(current);
var prev = $('#prev');
pos = $('.active').attr('id');
$("#num").text('(' + pos + '/' + researchPlaces.length + ')');
$(current).next().attr("class", "active");
$(current).attr("class", "passive");
//e.stopPropagation();
};
When I click next, it supposed to show the next span. However, it also shows the next span in other li(s) in the page.
<li class="memberElement" style="width: 100%; padding: 10px 0 10px 0; border-bottom: 1px solid #ccc;">
<div class="MemberImageHolder" style="float:left">
<a href="#">
<img class="memberpic" src="picture.php?action=display&contentType=members&id=5&quality=medium" alt="">
</a>
</div>
<div class="memberDetails">
Charles Darwin
<div id="title">Professor</div><div id="unit">
<b>University of Ottawa</b>
</div>
<div id="address">
<a id="prev">Prev </a>
<span id="1" class="active">150 York Street</span>
<span id="2" class="passive">80 Elgin Street</span>
<span id="num" class="passive">(0/2)</span>
<a id="next"> Next</a>
</div>
</div>
<span class="divider"></span>
</li>
This is my one of the li(s). What's wrong?

I think is because of your selector :
$('.active');
This selector select all the control that has active class. I guess you have one active span in each li.
To modify class, you should use addClass instead of modifying the attribute :
$(current).next().addClass("active");
$(current).removeClass("passive");
This way you won't lose other class associated with your control.
Edit :
You can get the li by the link clicked :
$("#prev").click(function()
{
var li = $(this).closest("li");
var current = $(li).find('.active');
alert(current);
var prev = $('#prev');
pos = $('.active').attr('id');
$("#num").text('(' + pos + '/' + researchPlaces.length + ')');
$(current).next().attr("class", "active");
$(current).attr("class", "passive");
//e.stopPropagation();
});

If each div with class 'address' is structured as in your code you can try:
var current = $(this).parent().find('.active');

Change an image with onclick()

I want to change an image to some other image when i click on the object. the code is stacked in the following order:
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
What I wish to do is, when I click on the <li> i want to change the image to a coloured version of the image, i.e. some other image. Now, I know I can use JQuery/JS to accomplish it. But I don't want a huge amount of JS code to accomplish something so simple.
Can it be done using something simpler? Like pseudo selectors? .active class?
I cannot seem to think of it.

To change image onclik with javascript you need to have image with id:
<p>
<img alt="" src="http://www.userinterfaceicons.com/80x80/minimize.png"
style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"/>
</p>
Then you could call the javascript function when the image is clicked:
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "http://www.userinterfaceicons.com/80x80/minimize.png"){
document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/maximize.png";
} else {
document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/minimize.png";
}
}
This code will set the image to maximize.png if the current img.src is set to minimize.png and vice versa.
For more details visit:
Change image onclick with javascript link

Or maybe
and that is prob it
<img src="path" onclick="this.src='path'">

How about this? It doesn't require so much coding.
$(".plus").click(function(){
$(this).toggleClass("minus") ;
})
.plus{
background-image: url("https://cdn0.iconfinder.com/data/icons/ie_Bright/128/plus_add_blue.png");
width:130px;
height:130px;
background-repeat:no-repeat;
}
.plus.minus{
background-image: url("https://cdn0.iconfinder.com/data/icons/ie_Bright/128/plus_add_minus.png");
width:130px;
height:130px;
background-repeat:no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plus">CHANGE</div>

If your images are named you can reference them through the DOM and change the source.
document["imgName"].src="../newImgSrc.jpg";
or
document.getElementById("imgName").src="../newImgSrc.jpg";

The most you could do is to trigger a background image change when hovering the LI. If you want something to happen upon clicking an LI and then staying that way, then you'll need to use some JS.
I would name the images starting with bw_ and clr_ and just use JS to swap between them.
example:
$("#images").find('img').bind("click", function() {
var src = $(this).attr("src"),
state = (src.indexOf("bw_") === 0) ? 'bw' : 'clr';
(state === 'bw') ? src = src.replace('bw_','clr_') : src = src.replace('clr_','bw_');
$(this).attr("src", src);
});
link to fiddle: http://jsfiddle.net/felcom/J2ucD/

Here, when clicking next or previous, the src attribute of an img tag is changed to the next or previous value in an array.
<div id="imageGallery">
<img id="image" src="http://adamyost.com/images/wasatch_thumb.gif" />
<div id="previous">Previous</div>
<div id="next">Next</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$( document ).ready(function() {
var images = [
"http://placehold.it/350x150",
"http://placehold.it/150x150",
"http://placehold.it/50x150"
];
var imageIndex = 0;
$("#previous").on("click", function(){
imageIndex = (imageIndex + images.length -1) % (images.length);
$("#image").attr('src', images[imageIndex]);
});
$("#next").on("click", function(){
imageIndex = (imageIndex+1) % (images.length);
$("#image").attr('src', images[imageIndex]);
});
$("#image").attr(images[0]);
});
</script>
I was able to implement this by modifying this answer: jQuery array with next and previous buttons to scroll through entries

If you don't want use js, I think, you can use instead of img and then use css like
a {
background: url('oldImage.png');
}
a:visited {
background: url('newImage.png');
}
EDIT: Nope. Sorry it works only for :hover

You can try something like this:
CSS
div {
width:200px;
height:200px;
background: url(img1.png) center center no-repeat;
}
.visited {
background: url(img2.png) center center no-repeat;
}
HTML
<div href="#" onclick="this.className='visited'">
<p>Content</p>
</div>
Fiddle

This script helps to change the image on click the text:
<script>
$(document).ready(function(){
$('li').click(function(){
var imgpath = $(this).attr('dir');
$('#image').html('<img src='+imgpath+'>');
});
$('.btn').click(function(){
$('#thumbs').fadeIn(500);
$('#image').animate({marginTop:'10px'},200);
$(this).hide();
$('#hide').fadeIn('slow');
});
$('#hide').click(function(){
$('#thumbs').fadeOut(500,function (){
$('#image').animate({marginTop:'50px'},200);
});
$(this).hide();
$('#show').fadeIn('slow');
});
});
</script>
<div class="sandiv">
<h1 style="text-align:center;">The Human Body Parts :</h1>
<div id="thumbs">
<div class="sanl">
<ul>
<li dir="5.png">Human-body-organ-diag-1</li>
<li dir="4.png">Human-body-organ-diag-2</li>
<li dir="3.png">Human-body-organ-diag-3</li>
<li dir="2.png">Human-body-organ-diag-4</li>
<li dir="1.png">Human-body-organ-diag-5</li>
</ul>
</div>
</div>
<div class="man">
<div id="image">
<img src="2.png" width="348" height="375"></div>
</div>
<div id="thumbs">
<div class="sanr" >
<ul>
<li dir="5.png">Human-body-organ-diag-6</li>
<li dir="4.png">Human-body-organ-diag-7</li>
<li dir="3.png">Human-body-organ-diag-8</li>
<li dir="2.png">Human-body-organ-diag-9</li>
<li dir="1.png">Human-body-organ-diag-10</li>
</ul>
</div>
</div>
<h2><a style="color:#333;" href="http://www.sanwebcorner.com/">sanwebcorner.com</a></h2>
</div>

function chkicon(num,allsize) {
var flagicon = document.getElementById("flagicon"+num).value;
if(flagicon=="plus"){
//alert("P== "+flagicon);
for (var i = 0; i < allsize; i++) {
if(document.getElementById("flagicon"+i).value !=""){
document.getElementById("flagicon"+i).value = "plus";
document.images["pic"+i].src = "../images/plus.gif";
}
}
document.images["pic"+num].src = "../images/minus.gif";
document.getElementById("flagicon"+num).value = "minus";
}else if(flagicon=="minus"){
//alert("M== "+flagicon);
document.images["pic"+num].src = "../images/plus.gif";
document.getElementById("flagicon"+num).value = "plus";
}else{
for (var i = 0; i < allsize; i++) {
if(document.getElementById("flagicon"+i).value !=""){
document.getElementById("flagicon"+i).value = "plus";
document.images["pic"+i].src = "../images/plus.gif";
}
}
}
}