How add same button to all images?

Hello Im trying to get the button on all of the images using a very basic for loop which unfortunately does not work and I dont know why.
HTML

<div class="myImagesContiner">
        <div class="container">
            <img src="http://www.earthseaspacemuseum.org/uploads/1/1/4/1/114149137/editor/pexels-photo-635279.jpeg?1512688677" class="myImages">
        </div>
        <div class="container">
            <img src="https://images.pexels.com/photos/1001682/pexels-photo-1001682.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="myImages">
        </div>
        <div class="container">
            <img src="https://cdn.pixabay.com/photo/2017/04/07/21/22/wave-2211925_960_720.jpg" class="myImages">
        </div>

        <button class="btn">Button</button>
    </div>

css

.myImagesContiner {
  margin: 20px;
  border: 2px solid black;
  padding: 5px;
  width: auto;
  height: 300px;
}
.myImagesContiner img {
  margin: 10px;
  width: 350px;
  height: 200px;
}
.myImagesContiner .btn {
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}
.myImagesContiner .container {
  display: block;
  margin: auto;
  float: left;
  margin: 20px;
  border: 2px solid black;
}

js

var quickViewBtn = document.getElementsByClassName("btm");
var imgContainer = document.document.getElementsByClassName("container");
  for(var i = 0; i < imgContainer.length; i++) {
    quickViewBtn.display = "block";
}

CODEPEN
https://codepen.io/josemon322/pen/WNNKpRg

I’m not sure if this is possible to solve with just JS, but hopefully someone else will know and give feedback.

It is possible with Jquery though. Is this one of the Curriculum challenges? If so, please post a link to the challenge so we can refresh ourselves of the goal.

edit: (also you have minor typos that may trip you up in the future; such as Continer & btm)

Your first line var quickViewBtn = document.getElementsByClassName("btm");
assigns var quickViewBtn to an HTMLCollection which is similar to an array.

The second line does the same for your elements with the “container” class.

Now your loop iterates over the imgContainer HTMLCollection and sets the display property of the quickViewBtn HTMLCollection to “block” which doesn’t accomplish much.

What you need to do is:

1.Get all the elements with the container class.
2. Loop through each element and insert a button.

Below is an example of one way to accomplish this and here are the docs for the js features used:

// Get the HTMLCollection that holds each picture currently
const container = document.getElementsByClassName('container');

// Loop over the collection elements
for (const item of container) {

  // Create the button element
  const button = document.createElement('button');

  // Set the text of the button
  button.innerText= 'Button';

  // Insert into the container by appending
  item.append(button);
}

Codepen

Thanks alot bro, worked fined

Everything you can do it with jQuery is possible with Vanila JavaScript. Is pretty and simple task.

hello man, I was wondering if there is another way to center every button in every single image besides the method that I’m trying to use, which is not working at all

const container = document.getElementsByClassName("container");

for (const item of container) {
  const button = document.createElement("button");  
  button.innerText = "Button"; 
  button.style.position = 'absolute';
  button.style.top = "0";
  button.style.left = "0";
  button.transform = translate(-50%, -50%);
  item.append(button);
}

I would suggest maybe just setting the className property of button in the loop to ‘btn’ or whatever you want.
button.className = 'btn';
Element.className

And add the styles in your CSS file.

btn {
  // Whatever you need to position it
}

A couple centering resources or google for your own:
https://www.w3.org/Style/Examples/007/center.en.html
https://css-tricks.com/centering-css-complete-guide/

I edited the codepen to show this, it centers the button underneath the picture. IDK if that’s where you wanted it but it’s just an example.
Codepen

thanks alot is just what I was looking for, im still thinking about why using the styles straight from the js didn’t work

button.innerText = "Button"; 
  button.style.position = 'absolute';
  button.style.top = "0";
  button.style.left = "0";
  button.transform = translate(-50%, -50%);

but anyway your method worked just perfect thanks