I need help ! I need for someone to edit my code for me because I am stuck. ORGI
ID: 3915260 • Letter: I
Question
I need help ! I need for someone to edit my code for me because I am stuck.
ORGINAL DIRECTIONS:
create a new JavaScript file named copyImage.js and write code that will make the images clickable so that when any one of the images is clicked a COPY of the img tag is placed in the empty div area and its src attribute set to the src attribute of the image that was clicked. (This way, the image shows up in that area.) If the SAME image on the left is clicked again, nothing should happen. If a different image is clicked, a copy of that img tag should REPLACE the img tag that is already in the div on the right. You are NOT allowed to modify the HTML file in ANY way especially by putting an onclick attribute in the img tags. Set up your click event for each image within a window.onload function defined in your JavaScript file. To make each image clickable you will have to collect all of the image objects into an array of images, run down the array using a for loop, and assign the SAME click handler function to each element in the array. All this is done inside of the window.onload function.
Here are the directions for the EDIT I need to make:
In the window onload function:
Get the element with id = imageArea.
Use that element to get all of its img elements.
That will be an array so use a for loop afterwards to run down the array and, for each element in the array, set its onclick event to a function called putImageInRightArea (or whatever you want to call it).
Now write the putImageInRightArea function (or whatever you called it) as follows:
Use the 'this' object, which will always be the image element that was clicked, to get its src attribute.
Check to see if the rightImageArea has any image in it. If it does, get its src attribute and compare it with the src you got from the this object.
If they are equal, just return from the function. This if statement doesn't have an else.
Below the if statement create a new image element, set its src to the one from the this object and replace the contents of the right area with the image element you just created.
If you do this correctly, then it doesn't matter how many images are on the page. It needs to work no matter how many images I add or take away.
Below are my original html and javascript files.
CopyImage.HTML:
<!DOCTYPE html>
<html>
<head>
<title>Copy Image</title>
<style>
#imageArea img, #rightArea img{
display: block;
width: 200px;
height: 150px;
margin-bottom: 10px;
border: 2px solid black;
}
#imageArea{
float: left;
width: 25%;
border: 2px solid pink;
padding: 10px;
text-align: center;
}
#rightArea{
float: left;
width: 25%;
border: 2px solid pink;
padding: 10px;
text-align: center;
}
</style>
<script src="copyImage.js"></script>
</head>
<body>
<div id="imageArea">
<img id = "sm_philly_1" src="sm_philly_1.jpg" />
<img id = "sm_philly_2" src="sm_philly_2.jpg" />
<img id = "sm_philly_3" src="sm_philly_3.jpg" />
<img id = "sm_philly_4" src="sm_philly_4.jpg" />
</div>
<div id="rightArea">
<h3>Selected Image</h3>
<div id="rightImageArea">
</div>
</div>
<script src="CopyImage.js"></script>
</body>
</html>
CopyImage.js
window.onload = function () {
//Declaring the variable
var img_src;
// onclicking the image below code will executed
document.getElementById("sm_philly_1").addEventListener("click", function(){
//Getting the src of the image
img_src = document.getElementById("sm_philly_1").src;
//setting image in the div with the new src
document.getElementById("rightImageArea").innerHTML = `<img src="`+img_src+`" />`;
});
// onclicking the image below code will executed
document.getElementById("sm_philly_2").addEventListener("click", function(){
//Getting the src of the image
img_src = document.getElementById("sm_philly_2").src;
//setting image in the div with the new src
document.getElementById("rightImageArea").innerHTML = `<img src="`+img_src+`" />`;
});
// onclicking the image below code will executed
document.getElementById("sm_philly_3").addEventListener("click", function(){
//Getting the src of the image
img_src = document.getElementById("sm_philly_3").src;
//setting image in the div with the new src
document.getElementById("rightImageArea").innerHTML = `<img src="`+img_src+`" />`;
});
// onclicking the image below code will executed
document.getElementById("sm_philly_4").addEventListener("click", function(){
//Getting the src of the image
img_src = document.getElementById("sm_philly_4").src;
//setting image in the div with the new src
document.getElementById("rightImageArea").innerHTML = `<img src="`+img_src+`" />`;
});
};
output
IMAGES USED
sm_philly_1.jpg
sm_philly_2.jpg
sm_philly_3.jpg
sm_philly_4.jpg
<!DOCTYPE html>
<html>
<head>
<title>Copy Image</title>
<style>
#imageArea img, #rightArea img{
display: block;
width: 200px;
height: 150px;
margin-bottom: 10px;
border: 2px solid black;
}
#imageArea{
float: left;
width: 25%;
border: 2px solid pink;
padding: 10px;
text-align: center;
}
#rightArea{
float: left;
width: 25%;
border: 2px solid pink;
padding: 10px;
text-align: center;
}
</style>
<script src="copyImage.js"></script>
</head>
<body>
<div id="imageArea">
<img id = "sm_philly_1" src="sm_philly_1.jpg" />
<img id = "sm_philly_2" src="sm_philly_2.jpg" />
<img id = "sm_philly_3" src="sm_philly_3.jpg" />
<img id = "sm_philly_4" src="sm_philly_4.jpg" />
</div>
<div id="rightArea">
<h3>Selected Image</h3>
<div id="rightImageArea">
</div>
</div>
<script src="CopyImage.js"></script>
</body>
</html>
eELLLLLLLLLLIEELExplanation / Answer
Please find the modified JS code below:
CODE
=============
function putImageInRightArea() {
var src = this.src;
var rightImageArea = document.getElementById("rightImageArea");
var rightImageAreaImage = rightImageArea.children;
if(rightImageAreaImage.length != 0) {
var rightImageAreaSrc = rightImageAreaImage[0].src;
if(rightImageAreaSrc == src) {
return;
}
var newImg = document.createElement("img");
newImg.setAttribute("src", src);
rightImageArea.replaceChild(newImg, rightImageAreaImage[0]);
} else {
var newImg = document.createElement("img");
newImg.setAttribute("src", src);
rightImageArea.appendChild(newImg);
}
}
window.onload = function () {
//Declaring the variable
var img_src;
var imageArea = document.getElementById("imageArea");
var images = imageArea.children;
for(let i=0; i<images.length; i++) {
images[i].addEventListener("click", putImageInRightArea);
}
};
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.