We Keep Coding

Why are my googleMaps not stacking like a gallery and lining up next to each other instead?

I want to create a gallery of googlemaps and use previous and next buttons to cycle through them.
However, instead of being in one after the other in a gallery they just appear next to each other in a row.
Html:
<div class="maps-gallery">
<iframe class ="maps-list active" src= [link] width="750" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<iframe class ="maps-list" src= [link] width="750" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<iframe class ="maps-list" src= [link] width="750" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="buttons">
<button disabled="" class="button prev">Prev</button>
<button class="button next">Next</button>
</div>
JavaScript:
const prevButton = document.querySelector('.prev')
const nextButton = document.querySelector('.next')
const mapsList = document.querySelectorAll('.maps-list')
let currentlySelected = 0;
prevButton.addEventListener('click', function() {
mapsList[currentlySelected].classList.remove("active");
currentlySelected--;
mapsList[currentlySelected].classList.add("active");
nextButton.disabled = false;
if (currentlySelected === 0){
prevButton.disabled=true
}
});
nextButton.addEventListener('click', function() {
mapsList[currentlySelected].classList.remove("active");
currentlySelected++;
mapsList[currentlySelected].classList.add('active')
prevButton.disabled = false;
if (mapsList.length === currentlySelected + 1) {
nextButton.disabled = true
}
});

Get child element contents in an array from class name in javascript

I need to get all img src from the class "photo-grid-item".
<a href="/photo/CIJXEU9VRY" class="photo-grid-item">
<img src="someimage.jpg" width="420" height="280" alt="man woman">
</a>
<a href="/photo/125255" class="photo-grid-item">
<img src="another.jpg" width="420" height="280" alt="man woman">
</a>
I have tried
Array.from(document.querySelectorAll(".photo-grid-item")).filter(el=>el.nextElementSibling.src)
What I need is
[someimage.jpg,another.jpg]

const resultArray = [];
const photoGridItems = document.querySelectorAll('.photo-grid-item');
photoGridItems.forEach(photoGridItem => {
let photoGridItemImage = photoGridItem.querySelector('img');
resultArray.push(photoGridItemImage.src)
})
console.log(resultArray)
<a href="/photo/CIJXEU9VRY" class="photo-grid-item">
<img src="someimage.jpg" width="420" height="280" alt="man woman">
</a>
<a href="/photo/125255" class="photo-grid-item">
<img src="another.jpg" width="420" height="280" alt="man woman">
</a>

How to position text in javascript

I am new to JS and is looking for a way to set the position for a text for a html website.
My codes are.
function changeText(value) {
var div = document.getElementById("div");
var text = "";
var image = "";
if (value == 1) text += "this is picture one <br> <img class='custom_h_w' src='images/consumers_1.png'/>";
if (value == 2) text += "this is picture two <br> <img class='custom_h_w' src='images/consumers_2.png'/>";
if (value == 3) text += "this is picture tree <br> <img class='custom_h_w' src='images/consumers_3.png'/>";
div.innerHTML = text;
}
<a href="javascript: changeText(1);">
<img id="searchconsumers" src="images/search.png" width="40px" height="40px" alt="abc" />
</a>
<a href="javascript: changeText(2);">
<img id="exploreconsumers" src="images/explore.png" width="40px" height="40px" alt="abc" />
</a>
<a href="javascript: changeText(3);">
<img id="funconsumers" src="images/fun.png" width="40px" height="40px" alt="abc" />
</a>
<div id="div"></div>

I suggest to wrap your text by a span then create a new class using your text position rules, it'll be something like the following example.
Hope this helps.
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector('#p_1').click();
})
function changeText(value) {
var div = document.getElementById("div");
var text = "";
var image = "";
if (value == 1) text += "<span class='custom_text_h_w'>this is picture one</span> <br> <img class='custom_h_w' src='http://www.xerys.com/images/xerys/1.png'/>";
if (value == 2) text += "<span class='custom_text_h_w'>this is picture two</span> <br> <img class='custom_h_w' src='http://www.xerys.com/images/xerys/2.png'/>";
if (value == 3) text += "<span class='custom_text_h_w'>this is picture tree</span> <br> <img class='custom_h_w' src='http://www.xerys.com/images/xerys/3.png'/>";
div.innerHTML = text;
}
.custom_h_w{
top: 120px;
left: 100px;
position: absolute;
}
.custom_text_h_w{
top: 70px;
right: 200px;
position: absolute;
}
<a href="javascript: changeText(1);" id="p_1">
<img id="searchconsumers" src="images/search.png" width="40px" height="40px" alt="abc" />
</a>
<a href="javascript: changeText(2);" id="p_2">
<img id="exploreconsumers" src="images/explore.png" width="40px" height="40px" alt="abc" />
</a>
<a href="javascript: changeText(3);" id="p_3">
<img id="funconsumers" src="images/fun.png" width="40px" height="40px" alt="abc" />
</a>
<div id="div"></div>

You would be better off using CSS for your positioning. I suggest you learn about the CSS box model to give you a better understanding of how layout works with CSS.
Say for example, you had 3 elements. You could position in the center and offset in one direction in this way:
.wrapper {
width: 80%;
margin: 10px auto;
text-align: center;
}
.child {
display: inline-block;
}
.middle {
margin-left: -20px;
}
<div class="wrapper">
<div class="child">Div 1</div>
<div class="child middle">Div 2</div>
<div class="child">Div 3</div>
</div>

According to your comments, you want to push the text resulting from your JS slightly to the right. If you don't want the image to be pushed right, wrap your text in <p> or <span> tags and target those.
function changeText(value) {
var div = document.getElementById("div");
var text = "";
var image = "";
if (value == 1) text += "<p>this is picture one</p> <br> <img class='custom_h_w' src='images/consumers_1.png'/>";
if (value == 2) text += "<p>this is picture two</p> <br> <img class='custom_h_w' src='images/consumers_2.png'/>";
if (value == 3) text += "<p>this is picture tree</p> <br> <img class='custom_h_w' src='images/consumers_3.png'/>";
div.innerHTML = text;
}
#div p {
margin-left: 2em;
}
<a href="javascript: changeText(1);">
<img id="searchconsumers" src="images/search.png" width="40px" height="40px" alt="abc" />
</a>
<a href="javascript: changeText(2);">
<img id="exploreconsumers" src="images/explore.png" width="40px" height="40px" alt="abc" />
</a>
<a href="javascript: changeText(3);">
<img id="funconsumers" src="images/fun.png" width="40px" height="40px" alt="abc" />
</a>
<div id="div"></div>

You can give position to element like
div.innerHTML = text;
div.style.position = "absolute";

Method for randomly loading paired images

I've created a webpage with many (over 100) paired flash cards with Question (image) flipping to Answer (image) when clicked. If possible I would like to be able to randomise the order in which the question/answer pairs load with each page load/refresh.
<div class="content4Column gap">
<div class="card-container">
<div class="card click" data-direction="left">
<div class="front">
<img src="Intermolecular/Q1.png" width="100%" height="100%" alt="">
</div>
<div class="back">
<img src="Intermolecular/A1.png" width="100%" height="100%" alt="">
</div></div></div></div>

Try
var QAPairs = [];
var QATotal = 200; // total numbers of QA pairs
var QA = 20; //number of QA pairs you want. Set to QATotal to include all QA pairs
while(QAPairs.length != QA){
var rand = Math.floor(Math.random()*QATotal);
if(QAPairs.indexOf(rand) == -1){
QAPairs.push(rand);
// If you want to show them all at a time
document.getElementsByClassName("card click")[0].innerHTML = document.getElementsByClassName("card click")[0].innerHTML + '<div class="front">\
<img src="Intermolecular/Q' + QAPairs[i] + '.png" width="100%" height="100%" alt="" />\
</div>\
<div class="back">\
<img src="Intermolecular/A' + QAPairs[i] + '.png" width="100%" height="100%" alt="" />\
</div>';
}
}
// if you want to show them one at a time
var i = 0;
function updateCard(){
document.getElementsByClassName("card click")[0].innerHTML = '<div class="front">\
<img src="Intermolecular/Q' + QAPairs[i] + '.png" width="100%" height="100%" alt="" />\
</div>\
<div class="back">\
<img src="Intermolecular/A' + QAPairs[i] + '.png" width="100%" height="100%" alt="" />\
</div>';
i++;
}

add a function on Page Load in Javascript

I have the folowing javascript code, what it does its loads a Map with different regions, when you hover or click over a country, it will display aditional information about that country in the right side of the map.
What i want to do is when the page loads, a random country is already showing information, without a hover or clic.
live example here: http://roneskinder.com/fm/image-map/index.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/Style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script src="js/easySlider1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
continuous: true
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#map-container AREA").mouseover(function () {
var regionMap = '.' + $(this).attr('id') + '-map';
var regionList = '.' + $(this).attr('id') + '-list';
jQuery(regionMap).css('display', 'inline');
// Check if a click event has occured and only change the Region hover state accodringly
if (!jQuery('#practice-container ul').hasClass('selected')) {
jQuery(regionList).css('display', 'inline');
}
}).mouseout(function () {
var regionMap = '.' + $(this).attr('id') + '-map';
var regionList = '.' + $(this).attr('id') + '-list';
// Check if a click event has occured and only change the Region hover state accodringly
if (!jQuery(regionMap).hasClass('selected')) {
jQuery(regionMap).css('display', 'none');
}
// Check if a click event has occured and only change the Region hover state accodringly
if (!jQuery('#practice-container ul').hasClass('selected')) {
jQuery(regionList).css('display', 'none');
}
});
jQuery("#map-container AREA").click(function () {
jQuery('#map-container img.region').removeClass('selected').css('display', 'none');
jQuery('#practice-container ul').removeClass('selected').css('display', 'none');
var regionMap = '.' + $(this).attr('id') + '-map';
var regionList = '.' + $(this).attr('id') + '-list';
jQuery(regionMap).addClass('selected').css('display', 'inline');
jQuery(regionList).addClass('selected').css('display', 'inline');
});
});
</script>
</head>
<body style="padding: 0; margin: 0;">
<form runat="server">
<div id="map-view-container">
<div id="map-container">
<img src='transparentMap.png' width='481' height='350' border='0' alt='' usemap='#regionMapView'
class='map' />
<map name='regionMapView' id='regionMapView'>
<area shape="poly" coords="101,148,103,139,102,135,112,124,125,118,131,110,135,112,142,107,167,104,181,101,188,102,194,97,193,92,207,99,237,98,250,93,285,107,253,123,238,121,231,129,227,136,210,149,194,147,183,154,174,155,175,171,162,176,158,171,149,170,147,153,136,152,133,158,122,150,113,152"
href="#Honduras" id="Honduras" />
<area shape="poly" coords="74,167,62,166,29,167,20,165,9,155,12,148,9,138,24,114,65,107,67,102,57,101,52,95,32,84,41,79,42,69,96,60,102,105,111,105,124,108,125,105,133,106,130,110,126,115,126,118,112,123,102,136,101,148,92,153,83,159"
id="guatemala" />
<area shape="poly" coords="157,178,172,191,207,215,214,216,224,213,241,212,257,210,264,215,271,220,280,217,281,212,273,203,278,188,273,192,275,183,276,169,282,180,283,162,283,145,290,129,286,114,288,107,273,110,251,124,237,121,236,127,227,133,226,137,209,149,198,147,184,153,174,155,176,172,157,179,157,178"
href="#nic" id="nic" />
<area shape="poly" coords="75,167,82,159,92,156,100,147,113,153,123,151,133,158,138,152,147,154,148,170,151,172,147,174,135,176,124,170,124,174"
href="#elSalvador" id="elSalvador" />
<area alt="panama England" shape="poly" coords="311,245,306,257,313,261,309,269,314,277,314,273,329,269,334,273,346,273,353,284,362,286,365,283,363,280,368,279,370,285,370,292,382,294,388,285,397,285,397,279,399,276,387,266,399,263,408,254,407,248,420,243,432,248,441,253,447,259,458,255,446,268,463,283,469,276,479,256,473,247,475,244,466,240,443,230,423,230,414,226,377,245,368,250,339,246,336,248,335,254,330,246,320,244,312,244"
href="#panama" id="panama" />
<!-- <area shape="poly" alt="southEast" id='southEast' coords="96,60,102,55,106,56,114,44,120,41,123,44,130,41,130,57,127,66,131,76,121,98,111,104,102,105"
href="#southEast" />-->
<area id="crica" alt="crica" shape="poly" coords="212,222,216,216,232,213,257,210,273,220,285,216,290,223,297,231,308,240,317,244,310,245,308,251,306,257,313,261,308,268,313,278,305,278,294,267,288,267,297,273,297,277,281,274,278,266,281,261,253,244,244,237,234,234,233,236,245,244,242,249,228,244,218,243,213,235,219,228,213,221"
href="#crica" />
<area id='london' shape='poly' alt='London' coords='186,365, 186,360, 187,360, 187,359, 188,359, 188,358, 189,358, 189,357, 191,357, 191,356, 192,356, 192,355, 196,355, 196,356, 198,356, 198,357, 200,358, 200,359, 201,359, 201,360, 203,360, 203,362, 202,362, 202,364, 200,364, 199,365, 198,366, 195,366, 194,367, 193,367, 193,368, 191,368,190,367, 188,367, 188,366, 187,366, 187,365'
href='#london' />
</map>
<img src='mvCostaRica.png' width='481' height='350' border='0' class='region crica-map'
alt='Costa Rica' />
<img src='mvPanama.png' width='481' height='350' border='0' class='region panama-map'
alt='Panama' />
<img src='mvGuatemala.png' width='481' height='350' border='0' class='region guatemala-map'
alt='Guatemala' />
<img src='mvHonduras.png' width='481' height='350' border='0' class='region Honduras-map'
alt='Honduras' />
<img src='mvElSalvador.png' width='481' height='350' border='0' class='region elSalvador-map'
alt='El Salvador' />
<img src='mvNicaragua.png' width='481' height='350' border='0' class='region nic-map'
alt='Nicaragua' />
<!-- <img src='mvBelice.png' width='481' height='350' border='0' class='region southEast-map'
alt='Belice' />-->
<img src="mvCentralAmerica.png" width="481" height="350" class="regionBg" />
</div>
<div id="practice-container">
<!--Nicaragua-->
<ul class="nic-list">
<li>
<iframe id="iframe1" src="../image-slider/nicaragua/index.html" height="350" width="430"
scrolling="no" frameborder="0" runat="server"></iframe>
</li>
</ul>
<!--El Salvador-->
<ul class="elSalvador-list">
<li>
<iframe id="iframe2" src="../image-slider/elSalvador/index.html" height="350" width="430"
scrolling="no" frameborder="0" runat="server"></iframe>
</li>
</ul>
<!--Honduras-->
<ul class="Honduras-list">
<li>
<iframe id="iframe3" src="../image-slider/honduras/index.html" height="350" width="430"
scrolling="no" frameborder="0" runat="server"></iframe>
</li>
</ul>
<!--Belice-->
<ul class="southEast-list">
<li>
<img src="images/0.png" alt="" /></li>
</ul>
<!--Panama-->
<ul class="panama-list">
<li>
<iframe id="iframe4" src="../image-slider/panama/index.html" height="350" width="430"
scrolling="no" frameborder="0" runat="server"></iframe>
</li>
</ul>
<!--Guatemala-->
<ul class="guatemala-list">
<li>
<iframe id="iframe5" src="../image-slider/guatemala/index.html" height="350" width="430"
scrolling="no" frameborder="0" runat="server"></iframe>
</li>
</ul>
<!--Costa Rica -->
<ul class="crica-list">
<li>
<iframe id="iframe6" src="../image-slider/costaRica/index.html" height="350" width="430"
scrolling="no" frameborder="0" runat="server"></iframe>
</li>
</ul>
</div>
</div>
</form>
</body>
</html>

You're doing it fine, I can't really think without the visual stuff
keywords = ["crica","panama","guatemala","Honduras","elSalvador","nic"]
Then random function
var keyword = keywords[Math.floor(Math.random()*keywords.length)]
So you got a lot of stuff right here
jQuery("#map-container AREA").click(function () {
jQuery('#map-container img.region').removeClass('selected').css('display', 'none');
jQuery('#practice-container ul').removeClass('selected').css('display', 'none');
var regionMap = '.' + $(this).attr('id') + '-map';
var regionList = '.' + $(this).attr('id') + '-list';
jQuery(regionMap).addClass('selected').css('display', 'inline');
jQuery(regionList).addClass('selected').css('display', 'inline');
});
You'll need to change the click function for a new document ready and replace the AREA thing with the keyword. If a hash works better for you then:
document.location.hash = keyword;
You're doing it fine, you can do it.