javascript - Display image then replace uploaded image -

i want upload images, (but first) click on image(input button upload images) display button replace new image on button images.

function displayuploadimages dosen't work if change "class" "id" codes work.

here codes :

  <div class="detail_left">     <div class="take">       <div class="image-upload" onclick="displayuploadimages()">        <label for="file-input">          <div class="takes backgrounds"></div>        </label>       </div>       <img class="uploaded" src="#" alt="">      </div>   <input id="file-input" class="" type="file" onchange="readurl(this);"/> 

 <script type="text/javascript">function readurl(input) {     if (input.files && input.files[0]) {         var reader = new filereader();          reader.onload = function (e) {             $('.uploaded')                 .attr('src', e.target.result)                 .width(350)                 .height(350);         };          reader.readasdataurl(input.files[0]);     } } function displayuploadimages() {           document.getelementsbyclassname("image-upload").style.display = "none";           } </script> 

since method , document.getelementsbyclassname , returns array , not element itself, changing id work.

if want use classname follows:

var elements = document.getelementsbyclassname('image-upload'); for(var = 0; < elements.length; i++){      elements[i].style.display = "none"; }