Отобразите изображение, затем замените загруженное изображение

Question

Я хочу загрузить изображения (но сначала) нажмите на изображение (кнопка ввода для загрузки изображений). Нажмите кнопку «Показать», а затем замените новые изображения кнопки «Изображение».

Функция displayUploadimages dosen't работа, но если я изменю "класса" к "Id" все коды работают.

Вот коды:

<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> 

Answer 1

Поскольку метод, document.getElementsByClassName, возвращает массив, а не сам элемент, изменяя это идентификатор будет работать.

Если вы хотите использовать имя класса, то сделать это следующим образом:

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