Develop Reference

Getting text from paragraph, after clicking and displaying an image

My html looks like that:
<div class="row g-0 align-items-center wow fadeInUp galle" style="margin-top: 20px; display: flex;
justify-content: space-around;" data-wow-delay=".25s">
<div class="modal-img">
<img class="full-img" src="#" alt="pop">
<p class="caption" style="font-size: 50px;color: white;"></p>
</div>
<div class="card aluminiumCard" id="aluminium" style="width: 18rem;">
<img id="imggene" src="assets\images\a.png" class="card-img-top alhigh" alt="..." >
<div class="card-body imgal">
<p class="card-text" style="font-size: 22px; text-align: center;font-weight: bold; color: white;">Text 1</p>
<p class="img-text">Text genesuis </p>
</div>
</div>
<div class="card aluminiumCard" style="width: 18rem;">
<img src="assets\images\2.png" class="card-img-top alhigh" alt="..." >
<div class="card-body imgal">
<p class="card-text" style="font-size: 22px; text-align: center;font-weight: bold; color: white;">Image 2</p>
<p class="img-text">Text 2</p>
</div>
</div>
</div>
What I am trying to do is to click on image and forward the src to the img with fullimg class, which is displayed in the middle of the screen. I have figured out this part, but I am struggling with getting the data from the paragraph with class img-text and forwarding it to the paragraph with caption class, which is also displayed in the middle of the screen under the image.
Here's my javascript:
const modalimg = document.querySelector(".modal-img");
const previews = document.querySelectorAll(".galle img");
const original = document.querySelector(".full-img");
const imgText = document.querySelector(".caption");
const Tests = document.querySelectorAll(".galle .img-text");
previews.forEach(preview => {
preview.addEventListener('click', () =>{
modalimg.classList.add("open");
original.classList.add("open");
const originalSrc = preview.getAttribute('src');
original.src = originalSrc;
Tests.forEach(test => {
const data = test.innerText;
console.log(data);
});
})
})
modalimg.addEventListener('click', (e) => {
if(e.target.classList.contains('modal-img')){
modalimg.classList.remove('open');
original.classList.remove("open");
}
})
})();
I was trying to get the innerText from img-text class and print that in the console just to test it, but it displays the innerText from all paragraphs with the same class.
What should I do, to get the innerText just from the card, that image is clicked on?

There are also sibling selectors you can use that take advantage of relative positioning. But be mindful of the html tags, adding or removing elements can break the assignments.
Alternatively you can add data-* attributes to the image and not have to worry about finding html tags at all.
document.addEventListener('DOMContentLoaded', (event) => {
const previews = document.querySelectorAll(".galle img");
const original = document.querySelector(".full-img");
const imgText = document.querySelector(".caption");
const imgText2 = document.querySelector(".caption2");
previews.forEach((e) => {
e.addEventListener('click', (e) => {
original.src = e.target.src;
imgText.innerText = e.target.nextElementSibling.querySelector(".img-text").innerText;
// OR by data-* attribute
imgText2.innerText = e.target.dataset.description;
});
});
});
.card-text {
font-size: 22px;
text-align: center;
font-weight: bold;
color: white;
}
<div class="row g-0 align-items-center wow fadeInUp galle" style="margin-top: 20px; display: flex;
justify-content: space-around;" data-wow-delay=".25s">
<div class="modal-img">
<img class="full-img" src="#" alt="pop">
<p class="caption" style="font-size: 20px;"></p>
<p class="caption2"></p>
</div>
<div class="card aluminiumCard" id="aluminium" style="width: 18rem;">
<img id="imggene" src="https://picsum.photos/id/237/100"
class="card-img-top alhigh" alt="..."
data-description="Text genesuis">
<div class="card-body imgal">
<p class="card-text">Text 1</p>
<p class="img-text">Text genesuis</p>
</div>
</div>
<div class="card aluminiumCard" style="width: 18rem;">
<img src="https://picsum.photos/id/2/100"
class="card-img-top alhigh" alt="..."
data-description="Text 2">
<div class="card-body imgal">
<p class="card-text">Image 2</p>
<p class="img-text">Text 2</p>
</div>
</div>
</div>

How to make an image moving in JavaScript using paddle keys?

I'm trying to build a simple game where the player can move between multiple levels.
The player is an image in my case i tried to move it by using javascript but it's not moving! I have tried multiple websites suggestions but none of them has worked
var avatar = document.getElementByClassName("alien-avatar");
var avatarStyle = document.getComputedStyle("alien-avatar");
var topValue = avatarStyle.getPropertyValue("top").replace("px", "");
function moveDown(element) {
var eStyle = window.getComputedStyle(element);
var topValue = eStyle.getPropertyValue("top").replace("px", "");
element.style.top = (Number(topValue) + 20) + "px";
}
moveDown("element");
// Subtract from the top style attribute to go up
function moveUp(element) {
var elStyle = window.getComputedStyle(element);
var topValue = elStyle.getPropertyValue("top").replace("px", "");
element.style.top = (Number(topValue) - 20) + "px";
}
// Add to the left style attribute to go right
function moveRight(element) {
var elStyle = window.getComputedStyle(element);
var leftValue = elStyle.getPropertyValue("left").replace("px", "");
element.style.left = (Number(leftValue) + 20) + "px";
}
// Subtract from the left style attribute to go left
function moveLeft(element) {
var elStyle = window.getComputedStyle(element);
var leftValue = elStyle.getPropertyValue("left").replace("px", "");
element.style.left = (Number(leftValue) - 20) + "px";
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<div class="main-game-table">
<div class="top-items-wrapper">
<div class="profile">
<div class="avatar"></div>
<span class="nickname">Nickname</span>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Complated Total Missions</div>
</div>
<div class="settings-btn">
<div class="setting-log"></div>
<ul class="drop-menu show-sett-drop">
<li class="setting-btn">Settings</li>
<li class="exit-btn">Exit</li>
</ul>
</div>
</div>
<!---->
<div class="game-planets">
<div class="planet-containers">
<div class="complated-planet">
<img src="images/compl-miss.png" alt="">
<div class="compl-plnt-info" id="planet1-info">
<div class="stars">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star-yellow.png" alt="">
</div>
<div class="celeb-message">
<span>GREAT!</span>
</div>
<div class="play-again">
play again
</div>
</div>
</div>
</div>
<div class="planet-containers">
<div class="complated-planet">
<img src="images/compl-miss.png" alt="">
<div class="compl-plnt-info" id="planet2-info">
<div class="stars">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star.png" alt="">
</div>
<div class="celeb-message">
<span>nice!</span>
</div>
<div class="play-again">
play again
</div>
</div>
</div>
</div>
<div class="planet-containers">
<div class="complated-planet">
<img src="images/compl-miss.png" alt="">
<div class="compl-plnt-info" id="planet3-info">
<div class="stars">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star.png" alt="">
<img src="images/mission-star.png" alt="">
</div>
<div class="celeb-message">
<span>keep it up</span>
</div>
<div class="play-again">
play again
</div>
</div>
</div>
</div>
<div class="planet-containers">
<div class="complated-planet">
<img src="images/compl-miss.png" alt="">
<div class="compl-plnt-info" id="planet4-info">
<div class="stars">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star-yellow.png" alt="">
<img src="images/mission-star.png" alt="">
</div>
<div class="celeb-message">
<span>nice!</span>
</div>
<div class="play-again">
play again
</div>
</div>
</div>
</div>
<div class="planet-containers">
<div class="current-planet">
<div class="alien-avatar" style="
width:100%;
height:100%;
top:0px;
left:0px;
"><img src="images/default-avatar.png" alt=""></div>
<div class="box" style="--n:20;--b:5px;width:150px;--c:#2beeff"></div>
</div>
</div>
<div class="planet-containers"></div>
<div class="planet-containers"></div>
<div class="planet-containers"></div>
<div class="planet-containers"></div>
</div>
<button class="start-btn">start</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
any help would be highly appreciate it!
please note that im still a beginner in this field

You are using getComputedStyle to remember what the position of an element is, but I would recommend keeping track of your elements positions in your code and not just in the HTML/CSS. Just a short example:
let avatar = document.getElementById("alien-avatar");
let avatarx = 20;
let avatary = 20;
function movePlayerUp() {
avatary--;
avatar.style.top = avatary + "px";
}
Update
You can also use getBoundingClientRect to check an element's position in the DOM
function moveRight() {
let position = avatar.getBoundingClientRect();
let newposition = position.x + 10;
avatar.style.left = newposition + "px";
}
The player element needs an id.
<div id="alien-avatar"...></div>

How do I get a 4by4 grid to display all my puzzle pieces?

I'm trying to make an image puzzle game where there is a 4by4 grid to try to solve a shuffled puzzle. I tried creating a 4by4 grid but had no luck let alone have each element in the array correspond to a puzzle piece on the board. I tried making divs for each image but couldn't figure out a way to display them properly on the board. How do I accomplish a 4by4 grid that can correspond to elements in my array?
Note: I know that my images don't display properly because the files haven't been converted to stack overflow's server, ignore it for now.
var pieces = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,];
function initialize()
{
for( var i = pieces.length; i<16; i++;){}
}
function shuffle()
{
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: radial-gradient(#9D5900, #3D2200);
}
.game-container {
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 10px;
margin: 50px;
justify-content: center;
perspective: 500px;
}
.card {
height: 225px;
width: 175px;
}
<!DOCTYPE html>
<html>
<title></title>
<link rel="stylesheet" type="text/css" href="PicturePuzzle.css" />
<script src="PicturePuzzle.js" type="text/javascript"></script>
<head>
<body onload = "initialize()">
<div class="game-container">
<div class="card">
<img src="char1.jpg">
</div>
<div class="card">
<img src ="char2.jpg">
</div>
<div class="card">
<img src ="char3.jpg">
</div>
<div class="card">
<img src="char4.jpg">
</div>
<div class="card">
<img src="char5.jpg">
</div>
<div class="card">
</div>
<img src="char6.jpg">
</div>
<div class="card">
<img src="char7.jpg" >
<div class="card">
<img src="char8.jpg" >
</div>
<div class="card">
<img src="char9.jpg" >
</div>
<div class="card">
<img src="char10.jpg">
</div>
<div class="card">
<img src="char11.jpg">
</div>
<div class="card">
<img src="char12.jpg">
</div>
<div class="card">
<img src="char13.jpg">
</div>
<img src="char14.jpg">
</div>
<div class="card">
<img src="char15.jpg">
</div>
<img src="char16.jpg">
</div>
</div>
<button onclick = "shuffle()">Shuffle</button>
</body>
</head>
</html>

You have HTML errors messing up the grid - there are </div> tags in the wrong places - and missing <div> tags
Correct HTML:
<div class=game-container>
<div class=card>
<img src=char1.jpg>
</div>
<div class=card>
<img src=char2.jpg>
</div>
<div class=card>
<img src=char3.jpg>
</div>
<div class=card>
<img src=char4.jpg>
</div>
<div class=card>
<img src=char5.jpg>
</div>
<div class=card>
<img src=char6.jpg>
</div>
<div class=card>
<img src=char7.jpg>
</div>
<div class=card>
<img src=char8.jpg>
</div>
<div class=card>
<img src=char9.jpg>
</div>
<div class=card>
<img src=char10.jpg>
</div>
<div class=card>
<img src=char11.jpg>
</div>
<div class=card>
<img src=char12.jpg>
</div>
<div class=card>
<img src=char13.jpg>
</div>
<div class=card>
<img src=char14.jpg>
</div>
<div class=card>
<img src=char15.jpg>
</div>
<div class=card>
<img src=char16.jpg>
</div>
</div>
There is a Javascript error - it doesn't affect the grid
There should be no semicolon after the increment expression in loop control statement
Also prefer to use let instead of var
for(let i=pieces.length; i<16; i++) {}

How can I make all images inside a row be equal size?

I am using Twitter Bootstrap and creating a row with 3 images, I would like all three images in the row to become equal size, however the third image is larger than the other and it being a little large in size despite all of the columns becoming the same size.
<div class="row">
<div class="col-6">
<div class="card card-size h-100" style="background-color: transparent; border: 0;">
<img src="utilities/java-icon.svg" class="card-img-top">
<div class="card-body text-center">
<p class="card-text"> <b> Python </b></p>
</div>
</div>
</div>
<div class="col-6">
<div class="card card-size h-100" style="background-color: transparent; border: 0;">
<img src="utilities/c-logo.svg" class="card-img-top">
<div class="card-body text-center">
<p class="card-text"> <b> Python </b></p>
</div>
</div>
</div>
</div>
The code is above.
How can I secure that all of the images in the row are of equal size?
I go not mind if all images are the same size as the smallest image or the largest, I would like dynamic behaviour this means I do not want to hard card a height etc...

In your image tag add this class to make your image responsive and equal to the columns width
If you are using Bootstrap 3 then img-responsive:
<img src="utilities/c-logo.svg" class="card-img-top img-responsive">
If You are using Bootstrap 4 then img-fluid:
<img src="utilities/c-logo.svg" class="card-img-top img-fluid">

this will work:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.myimage{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" class="img-fluid">
<img src="2.jpg" class="myimage img-responsive thumbnail" >
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" class="img-fluid">
<img src="2.jpg" class="myimage img-responsive thumbnail" >
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" class="img-fluid">
<img src="2.jpg" class="myimage img-responsive thumbnail" >
</div>
</div>
</div>
</body>
</html>
check fiddle:https://jsfiddle.net/13jqeywb/2/

How do I get the src of images when clicked on Fabric.js canvas?

i'm making a website with Fabricjs. One div is going to be the canvas and another is going to have lots of images (hundreds). I want to be able to click on the images so that they pop up in the canvas. My question is; how do i get the src of the images when clicked on so that an img node goes into the canvas node. Should i make an array of addEventl... for each of the images?
(writing in javascript)
thanks as always :)
<!doctype html>
<html lang="en";>
<head>
<meta charset="utf-8" />
<title>CustomCase</title>
<link rel="stylesheet" href="HeaderFooter.css">
<link rel="stylesheet" href="SkapaDesign.css">
<script src="Jquery.js"></script>
<script src="Fabric.js"></script>
<script src="Canvas.js"></script>
</head>
<body>
<div id="Wrapper">
<header id="Header">
Om Oss
Välj Design
<img id="Logo" src=LogotypHemsida.png>
Skapa Design
Hjälp
</header>
<section id="Body">
<img id="UpperShadow" src=NeråtSkugga.png>
<div id="LeftColumn">
<div id="TextMode">
</div>
<div id="CanvasContainer">
<canvas id="Canvas" width="270px" height="519px"></canvas>
</div>
<div id="LayerMode">
</div>
<div id="IPhoneMode">
</div>
</div>
<div id="RightColumn">
<div id="TextureMode">
</div>
<div id="TextureFilter">
</div>
<div id="TextureView">
<div id="TextureViewInside">
<div id="images">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
</div>
</div>
</div>
</div>
<img id="LowerShadow" src=UppåtSkugga.png>
</section>
<footer id="Footer">
<div id="FooterSpace"></div>
<div id="FooterColumnLeft">
Välj Design
Skapa Design
Om Oss
Hjälp
</div>
<div id="FooterDevider">
</div>
<div id="FooterColumnRight">
<div id="Facebook">
<img id="FacebookLogo" src=FacebookLogo.png>
Gilla oss på Facebook
</div>
<div id="Twitter">
<img id="TwitterLogo" src=TwitterLogo.png>
Följ oss på Twitter
</div>
</div>
<div id="FooterSpace"></div>
<div id="BottomColor"></div>
</footer>
</div>
</body>
</html>

You don't have to declare onclick for each img.
Try this: http://jsfiddle.net/cEh93/
$("#images img").click(function() {
var getsource = $(this).attr("src");
alert(getsource);
});

You don't need the onclick on each image, you can attach a jQuery event handler to all images and get their src attribute (this will output the image src to the console when the image is clicked):
jQuery(document).ready(function()
jQuery("#images img").on( "click", function() {
console.log( jQuery( this ).attr('src') );
});
}); // ready

You can set the retrieve of SRC only attaching event for upper DIV (using JS), like that:
<div id="images" onclick="getSelectedImageURL(event);">
<input type="image" src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
</div>
To get current selected image SRC on click event...
function getSelectedImageURL(event){
if(event.target.localName.toUpperCase() == 'IMG')
alert(event.target.src);
}