Событие OnClick для кнопки работает только в первом ряду таблицы

Question

Я использую Google Maps Geocoding для поиска и отображения адреса из строки таблицы на моей странице JSP. Адрес извлекается из ключа сеанса. Каждая строка имеет адрес и кнопку, но в настоящее время кнопка работает только с адресом в первой строке. Я новичок в этом, поэтому извиняюсь, если терминология неверна.

Код сеансового ключа:

<tbody>
<c:forEach items="${SKALLUSERS}" var="tempuser">    
    <tr>
        <td scope="row"><c:out value="${tempuser.getId()}"/></td>
            <td>${tempuser.id}</td>
            <td>${tempuser.email}</td>
            <td>${tempuser.password}</td>
            <td>${tempuser.firstName}</td>
            <td>${tempuser.lastName}</td>
            <td>${tempuser.userType}</td>
            <td><input id="address" type="textbox" 
            value="${tempuser.address}"></td>
            <td><a href="updateUser.jsp">Update</a></td>
            <td><input id="submit" type="button" value="Geocode"></td>
    </tr>
</c:forEach>
</tbody>

Google Maps Geocoding

<div id="floating-panel"></div>
<div id="map"></div>

<script>
    function initMap() {
    var map = new google.maps.Map
    (
        document.getElementById('map'), 
        {
            zoom: 8,
            center: {lat: -34.397, lng: 150.644}
        }
   );
   var geocoder = new google.maps.Geocoder();

   document.getElementById('submit').addEventListener
   (
       'click', function() 
       {
          geocodeAddress(geocoder, map);
       }
   );
  }

  function geocodeAddress(geocoder, resultsMap) 
  {
      var address = document.getElementById('address').value;
      geocoder.geocode({'address': address}, function(results, status) 
      {
      if (status === 'OK') 
      {
          resultsMap.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker
          ({
              map: resultsMap,
              position: results[0].geometry.location
          });
      }
      else 
      {
          alert('Geocode was not successful for the following reason: + status);
      }
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCH2nCSs1XR37Q6HdyUpZZfgP5_uMsi-vA&callback=initMap">
</script>

Answer 1

Ни в коем случае не эксперт, и я могу ошибаться, но, насколько я знаю, идентификаторы должны быть уникальными.

Попробуйте добавить класс к вашей кнопке отправки или индекс к идентификатору, что-то вроде "submit1", "submit2", а затем используйте: addEventListener у вас есть

document.getElementById('submit').addEventListener

Но используя другой, другой селектор, например getElementsByClassName, или текущий, если вы добавляете индекс, но получаете все элементы, чей идентификатор начинается с "submit".

Answer 2

Отнюдь не эксперт, и я тоже могу ошибаться.

Но, скорее всего, если только кнопка в первой строке таблицы в цикле forEach работает, как вы заявили, то и остальные должны работать.

За исключением, может быть, данных (т.е. items="${SKALLUSERS}") цикл, который вы просматриваете, как-то неверен, так что первый элемент, который приводит к первой строке таблицы, является единственным с ожидаемыми значениями, а остальные нет.