Get div value by ID

Question

I am new to JavaScript, I am trying to get the value of div on click in JavaScript. Here is my code:

HTML

<div class="divTable">
  <div class="divTableHeading">
      <div class="divTableRow">
          <div class="divTableCell" >DEPARTURE TIME</div>
            <div class="divTableCell">ARRIVAL TIME</div>
            <div class="divTableCell">FARE</div>
            <div class="divTableCell">BUS TYPE</div>
            <div class="divTableCell">AVAILABLE SEATS</div>
            <div class="divTableCell">STATUS</div>
        </div>
    </div>
    <div class="divTableBody" id="divTableBody">
    <div class="divTableRow" onclick="hey();">
      <div class="divTableCell1" id="departure_time">1200</div> 
      <div class="divTableCell1" id="arrival_time">1615</div>
      <div class="divTableCell1">1600</div>
      <div class="divTableCell1">VOLVO</div>
      <div class="divTableCell1">8</div>
      <div class="divTableCell1">OK</div>
    </div>
    <div class="divTableRow" onclick="hey();">
      <div class="divTableCell1" id="departure_time">8888</div> 
      <div class="divTableCell1" id="arrival_time">9999</div>
      <div class="divTableCell1">1600</div>
      <div class="divTableCell1">VOLVO</div>
      <div class="divTableCell1">8</div>
      <div class="divTableCell1">OK</div>
    </div>
    </div>
</div>

CSS

    .divTable{
        display: table;
        width: 100%;
        margin-top:20px;
    }
    .divTableRow {
        display: table-row;
        text-align: -webkit-center;
    }
    .divTableHeading {
        background-color: rgba(0, 102, 179, 0.6) !important;
        color: #fff;
        display: table-header-group;
        white-space: nowrap;
    }
    .divTableCell, .divTableHead {
        border: 1px solid #e3e3e3;
        display: table-cell;
        padding: 3px 10px;
        width:30%;
        white-space: nowrap;
    }
    .divTableCell1, .divTableHead {
        border: 1px solid #e3e3e3;
        display: table-cell;
        padding: 3px 10px;
        white-space: nowrap;
    }
    .divTableHeading {
        background-color: #EEE;
        display: table-header-group;
        font-weight: bold;
    }
    .divTableFoot {
        background-color: #EEE;
        display: table-footer-group;
        font-weight: bold;
    }
    .divTableBody {
        display: table-row-group;
    }

JavaScript

function hey() {
  alert("sdsdsd");
  var departure = document.getElementById("departure_time").innerHTML;
  alert(departure);
  var arrival = document.getElementById("arrival_time").innerHTML;
  alert(arrival);
}

Basically, its a table created in DIV tags, and the data shown here is from web service response. When I click on any divTableRow it only gives me the result of first row, But what I want is if user click on second row it should alert the second row data.

Here is the link to JSFiddle

Don't use the same ID for multiple elements, use class insted — Carsten Løvbo Andersen, May 16 '17 at 07:45
The problem is because you have multiple elements with the same `id`. This is invalid HTML. — Rory McCrossan, May 16 '17 at 07:46
Basically divTableRow filled by web service response, so I cant change the id for every row — Noob Player, May 16 '17 at 07:47
Possible duplicate of [JavaScript and getElementById for multiple elements with the same ID](http://stackoverflow.com/questions/3607291/javascript-and-getelementbyid-for-multiple-elements-with-the-same-id) — insertusernamehere, May 16 '17 at 07:50
@BilalZafar :- `Basically divTableRow filled by web service response,` ok, but html is created by you? Isn't it? If yes then you can change it — Alive to die - Anant, May 16 '17 at 07:54

Marcin Pevik · Answer 1 · 2017-05-16T09:46:52.673

First of all, you cannot have multiple elements with same ID on a page. Change departure_time and arrival_time to classes.

Then you may add a parameter to your event, like this:

<div class="divTableRow" onclick="hey(this);">

The this keyword is an HTML element that triggered this event. In your javascript you can use it this way:

function hey(element) {
    var departure = element.getElementsByClassName("departure_time")[0].innerText;
    var arrival = element.getElementsByClassName("arrival_time")[0].innerText;
    alert(departure);
    alert(arrival);
}

And the whole snippet might look like this:

function hey(element) {
    var departure = element.getElementsByClassName("departure_time")[0].innerText;
    var arrival = element.getElementsByClassName("arrival_time")[0].innerText;
    alert(departure);
    alert(arrival);
}

.divTable{
        display: table;
        width: 100%;
        margin-top:20px;
    }
    .divTableRow {
        display: table-row;
        text-align: -webkit-center;
    }
    .divTableHeading {
        background-color: rgba(0, 102, 179, 0.6) !important;
        color: #fff;
        display: table-header-group;
        white-space: nowrap;
    }
    .divTableCell, .divTableHead {
        border: 1px solid #e3e3e3;
        display: table-cell;
        padding: 3px 10px;
        width:30%;
        white-space: nowrap;
    }
    .divTableCell1, .divTableHead {
        border: 1px solid #e3e3e3;
        display: table-cell;
        padding: 3px 10px;
        white-space: nowrap;
    }
    .divTableHeading {
        background-color: #EEE;
        display: table-header-group;
        font-weight: bold;
    }
    .divTableFoot {
        background-color: #EEE;
        display: table-footer-group;
        font-weight: bold;
    }
    .divTableBody {
        display: table-row-group;
    }

<div class="divTable">
  <div class="divTableHeading">
      <div class="divTableRow">
          <div class="divTableCell" >DEPARTURE TIME</div>
            <div class="divTableCell">ARRIVAL TIME</div>
            <div class="divTableCell">FARE</div>
            <div class="divTableCell">BUS TYPE</div>
            <div class="divTableCell">AVAILABLE SEATS</div>
            <div class="divTableCell">STATUS</div>
        </div>
    </div>
    <div class="divTableBody" id="divTableBody">
    <div class="divTableRow" onclick="hey(this);">
      <div class="divTableCell1 departure_time">1200</div> 
      <div class="divTableCell1 arrival_time">1615</div>
      <div class="divTableCell1">1600</div>
      <div class="divTableCell1">VOLVO</div>
      <div class="divTableCell1">8</div>
      <div class="divTableCell1">OK</div>
    </div>
    <div class="divTableRow" onclick="hey(this);">
      <div class="divTableCell1 departure_time">8888</div> 
      <div class="divTableCell1 arrival_time">9999</div>
      <div class="divTableCell1">1600</div>
      <div class="divTableCell1">VOLVO</div>
      <div class="divTableCell1">8</div>
      <div class="divTableCell1">OK</div>
    </div>
    </div>
</div>

Yes there is, but we only want to get elements that are children of clicked element. — Marcin Pevik, May 16 '17 at 08:04
But you have the clicked element in your method. `element.getElementsByClassName` — Jamiec, May 16 '17 at 08:14

score 0 · Answer 2 · answered May 16 '17 at 07:55

As you added tag jQuery, you can use the following snippet to solve your issue:

$("div.divTableRow").click(function(){
  var departure = $(this).find("#departure_time").text();
  alert(departure);
  var arrival = $(this).find("#arrival_time").text(); 
  alert(arrival);
});

DEMO

score 0 · Answer 3 · answered May 16 '17 at 07:57

Try using jQuerys click handler, so you can reference the clicked element within the click handler. The idea is to limit the scope ("#departure_time WITHIN the clicked row"). The answer, of course, is only valid as long as "filled by web service response" is true. Normally, you would use classes for

https://api.jquery.com/click/

$('.divTableRow').click(hey);

function hey (evt) {
  alert("sdsdsd");
  var departure = $(this).find('#departure_time').text();
  alert(departure);
  var arrival = $(this).find('#arrival_time').text();
  alert(arrival);
}

.divTable{
        display: table;
        width: 100%;
        margin-top:20px;
    }
    .divTableRow {
        display: table-row;
        text-align: -webkit-center;
    }
    .divTableHeading {
        background-color: rgba(0, 102, 179, 0.6) !important;
        color: #fff;
        display: table-header-group;
        white-space: nowrap;
    }
    .divTableCell, .divTableHead {
        border: 1px solid #e3e3e3;
        display: table-cell;
        padding: 3px 10px;
        width:30%;
        white-space: nowrap;
    }
    .divTableCell1, .divTableHead {
        border: 1px solid #e3e3e3;
        display: table-cell;
        padding: 3px 10px;
        white-space: nowrap;
    }
    .divTableHeading {
        background-color: #EEE;
        display: table-header-group;
        font-weight: bold;
    }
    .divTableFoot {
        background-color: #EEE;
        display: table-footer-group;
        font-weight: bold;
    }
    .divTableBody {
        display: table-row-group;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divTable">
  <div class="divTableHeading">
      <div class="divTableRow">
          <div class="divTableCell" >DEPARTURE TIME</div>
            <div class="divTableCell">ARRIVAL TIME</div>
            <div class="divTableCell">FARE</div>
            <div class="divTableCell">BUS TYPE</div>
            <div class="divTableCell">AVAILABLE SEATS</div>
            <div class="divTableCell">STATUS</div>
        </div>
    </div>
    <div class="divTableBody" id="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell1" id="departure_time">1200</div> 
      <div class="divTableCell1" id="arrival_time">1615</div>
      <div class="divTableCell1">1600</div>
      <div class="divTableCell1">VOLVO</div>
      <div class="divTableCell1">8</div>
      <div class="divTableCell1">OK</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell1" id="departure_time">8888</div> 
      <div class="divTableCell1" id="arrival_time">9999</div>
      <div class="divTableCell1">1600</div>
      <div class="divTableCell1">VOLVO</div>
      <div class="divTableCell1">8</div>
      <div class="divTableCell1">OK</div>
    </div>
    </div>
</div>

You still shouldnt have multiple ID's. You could easily craft a jQuery solution which uses class names. — Jamiec, May 16 '17 at 07:59
@Jamiec That's why I quoted the OPs sentence about getting the data from a web service with that bogus multiple IDs. — SVSchmidt, May 16 '17 at 08:01

score 0 · Accepted Answer · answered May 16 '17 at 07:58

Do not use the same ID multiple times, change thm to classes. Thereafter if you want to do this with vanilla javascript use pass a reference to the row in your method call hey and use getElementsByClassName:

window.hey = function(div){
  var departure = div.getElementsByClassName("departure_time")[0].innerHTML;
  alert(departure);
  var arrival = div.getElementsByClassName("arrival_time")[0].innerHTML;
  alert(arrival);  
};

.divTable{
  display: table;
  width: 100%;
  margin-top:20px;
}
.divTableRow {
  display: table-row;
  text-align: -webkit-center;
}
.divTableHeading {
  background-color: rgba(0, 102, 179, 0.6) !important;
  color: #fff;
  display: table-header-group;
  white-space: nowrap;
}
.divTableCell, .divTableHead {
border: 1px solid #e3e3e3;
  display: table-cell;
  padding: 3px 10px;
  width:30%;
  white-space: nowrap;
}
.divTableCell1, .divTableHead {
  border: 1px solid #e3e3e3;
  display: table-cell;
  padding: 3px 10px;
  white-space: nowrap;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}
.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}
.divTableBody {
  display: table-row-group;
}

<div class="divTable">
  <div class="divTableHeading">
   <div class="divTableRow">
    <div class="divTableCell" >DEPARTURE TIME</div>
   <div class="divTableCell">ARRIVAL TIME</div>
   <div class="divTableCell">FARE</div>
   <div class="divTableCell">BUS TYPE</div>
   <div class="divTableCell">AVAILABLE SEATS</div>
   <div class="divTableCell">STATUS</div>
  </div>
 </div>
 <div class="divTableBody" id="divTableBody">
    <div class="divTableRow" onclick="hey(this);">
      <div class="divTableCell1 departure_time">1200</div> 
      <div class="divTableCell1 arrival_time">1615</div>
      <div class="divTableCell1">1600</div>
      <div class="divTableCell1">VOLVO</div>
      <div class="divTableCell1">8</div>
      <div class="divTableCell1">OK</div>
    </div>
    <div class="divTableRow" onclick="hey(this)">
      <div class="divTableCell1 departure_time">8888</div> 
      <div class="divTableCell1 arrival_time">9999</div>
      <div class="divTableCell1">1600</div>
      <div class="divTableCell1">VOLVO</div>
      <div class="divTableCell1">8</div>
      <div class="divTableCell1">OK</div>
    </div>
 </div>
</div>

Get div value by ID

4 Answers4