How to change css with javascript of multiple images - display: none to display: inline

Question

So I would like the images to appear after I click the button.

HTML

<button class="knife-button" onclick="bayonetFunction()">Click to see more</button>

<div class="column1">
    <img src=""  class="bayonet" alt="">
</div>

<div class="column1">
    <img src=""  class="bayonet" alt="">
</div>

There s more images.

CSS

.bayonet {
      display: none;
 }

JS

function bayonetFunction(){
      document.getElementsByClassName('bayonet').style.display="inline";
}

This doesnt work.

Answer 1

 function bayonetFunction(){ [].forEach.call(document.querySelectorAll('.bayonet'), function(d) { d.style.display ="inline"; }); }

 .bayonet { display: none; }

 <button class="knife-button" onclick="bayonetFunction()">Click to see more</button> <div class="column1"> <img src="https://www.gravatar.com/avatar/3ad45b8fc3a096c8d840bcedb819bfb8?s=32&d=identicon&r=PG&f=1" class="bayonet" alt=""> </div> <div class="column1"> <img src="https://www.gravatar.com/avatar/3ad45b8fc3a096c8d840bcedb819bfb8?s=32&d=identicon&r=PG&f=1" class="bayonet" alt=""> </div>

Answer 2

You have to iterate over all elements. See this code example:

 function bayonetFunction(){ document.querySelectorAll('.bayonet').forEach(function(el) { el.style.display = 'block'; }); }

 .bayonet { display: none; width: 100px; height: 100px; background: teal; }

 <button class="knife-button" onclick="bayonetFunction()">Click to see more</button> <div class="column1"> <img src="" class="bayonet" alt=""> </div> <div class="column1"> <img src="" class="bayonet" alt=""> </div>