I want to take the data of each label?

Question

I want to take the data of each label?

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

I want to click on each button of each div generated I take the data in which they are, the price and the name, but when the page is generated, all the buttons return the information of the first <div> generated for the foreach...

    <script type="text/javascript"> 
     function data(){
         var nombre = document.getElementById("nombre").innerHTML;
         var precio = document.getElementById("precio").innerHTML;

         alert(nombre+" "+precio);
     }
 </script>

So this is the block that is generated depending on the number of objects GPU that they have:

     <c:forEach items="${gpus}" var="gpus"> 
        <div class="col-lg-4 col-md-6 mb-4">
          <div class="card h-100">
            <a href="#"><img class="card-img-top" src="${gpus.url}" alt=""></a>
            <div class="card-body">
              <h4 class="card-title">
                  <a id="nombre" href="">${gpus.nombre}</a>
              </h4>
                <h5 id="precio">$ ${gpus.precio}</h5>
              <p class="card-text">${gpus.descripcion}</p>
            </div>
            <div class="card-footer">
                <button type="button" onclick="data()"id="info" class="btn btn-success">Agregar al carrito</button>
            </div>
          </div>
        </div>

       </c:forEach>

[

javascript html5 jsp

asked by Daniel L.Estevez 28.11.2017 в 14:12

source

2 answers

1

The error is because, in HTML the id of each element is expected to be unique and unrepeatable .

For each of the "products" of your page you are creating several times elements with id "name" and "price", and when you obtain them with document.getElementById you only get the first one that was created with said id .

One solution is to concatenate to these elements the ID of each "product" and thus obtain unique 'ids' for each element HTML

Example

Assuming that within ${gpus.id} is the ID of each "product", then, the code would be this:

<c:forEach items="${gpus}" var="gpus">
  <div class="col-lg-4 col-md-6 mb-4">
    <div class="card h-100">
      <a href="#"><img class="card-img-top" src="${gpus.url}" alt=""></a>
      <div class="card-body">
        <h4 class="card-title">
          <a id="nombre${gpus.id}" href="">${gpus.nombre}</a>
        </h4>
        <h5 id="precio${gpus.id}">$ ${gpus.precio}</h5>
        <p class="card-text">${gpus.descripcion}</p>
      </div>
      <div class="card-footer">
        <button type="button" onclick="data(${gpus.id})" id="info" class="btn btn-success">Agregar al carrito</button>
      </div>
    </div>
  </div>
</c:forEach>


<script type="text/javascript">
  function data(id) {
    var nombre = document.getElementById('nombre' + id).innerHTML;
    var precio = document.getElementById('precio' + id).innerHTML;

    alert(nombre + " " + precio);
  }
</script>

answered by 28.11.2017 в 14:35

Error converting a String to an object Date formatted as dd / MM / yyyy Extract table data to another table automatically in MYSQL [closed]

score 2 · Accepted Answer

First, as you have several elements with names (name and price) you should not use id , you should use class ... Remember that the id is a unique and unrepeatable identifier in the site

Now what you should do is capture the information belonging to the button that was clicked, as follows:

Functional example (using native JavaScript)

function data(event){
    var nombre = event.parentNode.parentNode.getElementsByClassName('nombre')[0].innerHTML;
    var precio = event.parentNode.parentNode.getElementsByClassName('precio')[0].innerHTML;
    

    alert(nombre+" "+precio);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="col-lg-4 col-md-6 mb-4">
    <div class="card h-100">
        <a href="#"><img class="card-img-top" src="" alt=""></a>
        <div class="card-body">
            <h4 class="card-title">
                <a class="nombre" href="">Producto 1</a>
            </h4>
            <h5 class="precio">10.000</h5>
            <p class="card-text">Descripci+on producto 1</p>
        </div>
        <div class="card-footer">
            <button type="button" onclick="data(this)" id="info" class="btn btn-success">Agregar al carrito</button>
        </div>
    </div>
</div>

<div class="col-lg-4 col-md-6 mb-4">
    <div class="card h-100">
        <a href="#"><img class="card-img-top" src="" alt=""></a>
        <div class="card-body">
            <h4 class="card-title">
                <a class="nombre" href="">Producto 2</a>
            </h4>
            <h5 class="precio">20.000</h5>
            <p class="card-text">Descripci+on producto 2</p>
        </div>
        <div class="card-footer">
            <button type="button" onclick="data(this)" id="info" class="btn btn-success">Agregar al carrito</button>
        </div>
    </div>
</div>

How your code should look

<c:forEach items="${gpus}" var="gpus"> 
    <div class="col-lg-4 col-md-6 mb-4">
        <div class="card h-100">
            <a href="#"><img class="card-img-top" src="${gpus.url}" alt=""></a>
            <div class="card-body">
                <h4 class="card-title">
                    <a class="nombre" href="">${gpus.nombre}</a>
                </h4>
                    <h5 class="precio">$ ${gpus.precio}</h5>
                <p class="card-text">${gpus.descripcion}</p>
            </div>
            <div class="card-footer">
                <button type="button" onclick="data(this)" id="info" class="btn btn-success">Agregar al carrito</button>
            </div>
        </div>
    </div>
</c:forEach> 

<script type="text/javascript">
function data(event){
    var nombre = event.parentNode.parentNode.getElementsByClassName('nombre')[0].innerHTML;
    var precio = event.parentNode.parentNode.getElementsByClassName('precio')[0].innerHTML;


    alert(nombre+" "+precio);
}
</script>