Попытка вызвать событие `click` на js не работает

Я хочу инициировать событие click на входе file при нажатии другого объекта button. Я знаю, что код js работает до того момента, когда я вызываю предложение modelObject.click(), но целевой объект не реагирует.

Это код:

{% extends "StylingApp/base_site.html" %}

{% block title %} Álbumes {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
{% endblock stylesheets %}

{% block content %}
  <div class = "right_col" role = "main">
    <div class = "">
      <div class = "page-title">
        <div class = "title_left">
          <h3> Álbum: {{ album.name }}</h3>
          <form method = "POST" id = "new_files">
            <div type = "button" class = "btn btn-success" id = "add-photos"><span class = "fa fa-photo"></span> Agregar</div>
            <input type = "file" id = "select-photo-files" value = "" style = "opacity: 0">
          </form>
        </div>

        <div class = "title_right">
          <div class = "col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
             <div class = "input-group">
              <input type = "text" class = "form-control" placeholder = "Buscar...">
              <span class = "input-group-btn">
                  <button class = "btn btn-default" type = "button">Ir</button>
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class = "clearfix"></div>

      <div class = "row">
        <div class = "col-md-12">
          <div class = "x_panel">
            <div class = "x_content">
              <div class = "row">
                {% for photo in photos %}
                <div class = "col-md-55">
                  <div class = "thumbnail">
                    <div class = "image view view-first">
                      <img style = "width: 100%; display: block;" src = "{{ photo.photo.url }}" alt = "image" />
                      <div class = "mask no-caption">
                        <div class = "tools tools-bottom">
                          <a href = "{{ photo.photo.url }}"><i class = "fa fa-link"></i></a>
                          <a href = "#"><i class = "fa fa-times"></i></a>
                        </div>
                      </div>
                    </div>
                    <div class = "caption">
                      <p>{{ photo.description }}</p>
                    </div>
                  </div>
                </div>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> 
{% endblock content %}

{% block javascripts %}
  {{ block.super }}
  <script type = "text/javascript">
     var addPhotosButton = document.getElementById('add-photos');
     var selectPhotoFilesInput = document.getElementById('select-photo-files');

    addPhotosButton.addEventListener('click', function(selectPhotoFilesInput){
      selectPhotoFilesInput.click();
    });
  </script>
{% endblock javascripts %}