Question

In: Computer Science

How to place the same image in 4 separate divs by pressing a button using a...

How to place the same image in 4 separate divs by pressing a button using a javascript function?

HTML AND CSS:

<html>
<head>
<meta charset="utf-8">
<style>
body {
margin: 0;
}

#flex-container {
display: flex;
justify-content: space-between;
height: 300px;
}

nav {
background-color: royalblue;
height: 75px;
text-align:center;
}

#button {
}

header {
background-color: lightskyblue;
height: 400px;
}

section {
background-color: gray;
margin: 75px 100px;
/*height:650px;*/
padding-bottom:50px;
}

footer {
background-color: black;
height: 100px;
}

p {
background-color: khaki;
height: 200px;
margin-bottom: 100px;
}

div.col {
background-color: tomato;
border: 2px solid black;

width: calc(20%);
}

</style>
</head>

<title>Squarespace layout</title>

<body>

</head>
<body>

<nav>
<div class="button">
<button onclick = "addTheImage()">
click here for gorilla
</button>
</div>
</nav>
<header></header>
<section>

<p></p>

<div id="flex-container">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

</section>
<footer></footer>
</body>
</html>

MY JAVA CODE SO FAR: (THIS PUTS A NEW ONE AT THE BOTTOM EVERYTIME I NEED 1 EACH IN THE TOMATO COLORED DIV)

function addTheImage() {
var img = document.createElement('img');
img.src = "https://media.giphy.com/media/27ppQUOxe7KlG/giphy.gif";
document.body.appendChild(img);
}

Expert Solution

HTML page :

<html>

<head>

<style>

body {

margin: 0;

}

#flex-container {

display: flex;

justify-content: space-between;

height: 300px;

}

nav {

background-color: royalblue;

height: 75px;

text-align: center;

}

#button {}

header {

background-color: lightskyblue;

height: 400px;

}

section {

background-color: gray;

margin: 75px 100px;

/*height:650px;*/

padding-bottom: 50px;

}

footer {

background-color: black;

height: 100px;

}

p {

background-color: khaki;

height: 200px;

margin-bottom: 100px;

}

div.col {

background-color: tomato;

border: 2px solid black;

width: calc(20%);

}

img {

height: 150px;

width: 150px;

}

</style>

</head>

<title>Squarespace layout</title>

<body>

</head>

<body>

<nav>

click here for gorilla

</button>

</div>

</nav>

<p></p>

</div>

</section>

var i = 0;//declaring variable i

//function addTheImage

function addTheImage() {

var img = document.createElement('img');//creating img element

//assigning src to the image

img.src = "https://media.giphy.com/media/27ppQUOxe7KlG/giphy.gif";

//getting div

document.getElementsByClassName("col")[i].appendChild(img);

i++;//increment value of i

}

</script>

</body>

</html>

====================================

Screen when button is clicked for first time :

Screen when button is clicked for third time :

venereology answered 1 year ago

By pressing the start button, 5 motors will be activated in order. Each of the engines...

By pressing the start button, 5 motors will be activated in order. Each of the engines will run for 54 seconds, and when an engine stops, the next engine will start. The working cycle of the engines will be repeated 54 times. There is 1 stop button and 1 emergency stop button in the system. While the motors are running, the leds connected to each motor will also light. Create the symbol table of the plc program that will perform...

I NEED TO CREATE A GUI INTERFACE USING TKINTER CONTAINING : Colors, Image, Button, Title bar,...

I NEED TO CREATE A GUI INTERFACE USING TKINTER CONTAINING : Colors, Image, Button, Title bar, and a Menu bar FOR THE QUESTION BELOW: PLEASE HELP PROGRAMMING LANGUAGE IS PYTHON Write a simple quiz game that has a list of ten questions and a list of answers to those questions. The game should give the player four randomly selected questions to answer. It should ask the questions one-by-one, and tell the player whether they got the question right or wrong....

Draw peptide PLACE at pH 3 and describe how you would separate it using cation/anion exchange...

Draw peptide PLACE at pH 3 and describe how you would separate it using cation/anion exchange column with the pH of the buffer and order of elution.

Form a separate model from that created in question 7 above, but using the same LS...

Form a separate model from that created in question 7 above, but using the same LS and LD equations, and show how worker and employer surpluses change based on the imposition of a wage ceiling at $17 – be sure to represent the area for dead weight loss and all values needed to calculate these changed areas and values. Again, it is not necessary to calculate the values for ES, WS, etc. but you must show the areas of these...

How can I configure the button in this tip calculator to calculate the total using the...

How can I configure the button in this tip calculator to calculate the total using the entires for the bill and tip percentage? I'm using Visual Studio 2019 Xamarin.Forms Main.Page.xaml <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="Accomplish_2.MainPage" BackgroundColor="Gray" Padding="5"> <StackLayout>  <Label Text="Tip Calculator" HorizontalOptions="Center" VerticalOptions="Center" FontSize="Title" FontAttributes="Bold"/> <BoxView BackgroundColor="LightPink" HeightRequest="3"></BoxView> <Entry Placeholder="Bill Total" Keyboard="Numeric" x:Name="billTotal"></Entry> <Entry Placeholder="Tip Percentage" Keyboard="Numeric" x:Name="tipPercent"></Entry> <Button Text="Calculate" Clicked="Button_Clicked"></Button> </StackLayout> </ContentPage> Everything above...

Using the thin lens equation, determine the location and size of each image of the "4"...

Using the thin lens equation, determine the location and size of each image of the "4" when it is a the 10cm mark, the 20cm convex lens(objective) is at the 80cm mark and the 10cm lens(eyepiece) is placed at the 114cm mark on the track. How many times larger is the final image when the eyepiece is at the 116cm mark?

Your HCO is opening a new clinic using the same EHR and information systems in place...

Your HCO is opening a new clinic using the same EHR and information systems in place at its other clinics. Clerks, nurses, and physicians will all input information to the EHR and several management systems. What should the KM training program for new associates include? How would you accomplish that training economicaly?

Consider two Images of same dimensions where one image is an original image and other should...

Consider two Images of same dimensions where one image is an original image and other should be a degraded image. Write a matlab program to measure picture quality using objective assessment validation criteria for the degraded image and original image. Calculate MSE, PSNR, Normalized absolute error, Maximum Difference, Structural content, Average difference, Normalized cross correlation for the images. Explain the importance of Objective assessment in Image processing

Using cImage in Python, how to create an image of a sunset (at least 400 by...

Using cImage in Python, how to create an image of a sunset (at least 400 by 400 pixels), black at the top, becoming redder/yellower lower down. Also, randomly place in the sky a given number of white stars of random size of either one pixel or 4 (adjacent) pixels

-Insert an image of a hydrangea flower. -Insert an image of a spider lily.- -Without using...

-Insert an image of a hydrangea flower. -Insert an image of a spider lily.- -Without using a function write the JavaScript code so that when you to mouse over the spider lily, both the spider lily and the hydrangea are replaced by the image of a perennial hibiscus.