Changing the text of a label with jquery with text () or html () does not work

I propose a solution based on the use of attributes data-* . I do not think a code is correct in which you store values that are necessary for calculations along with words, as is the case of Stock . With the attributes data-* you can store in each div elements as the quantity in stock or the price as numbers and use those values for future calculations. And more professional things would be easier to implement, such as disabling the items when the stock reaches 0 .

In this fragment, the double clicks of div are heard and in each double click the stock is reduced by one.

Keep in mind that this code will be very useful also if you want to work with the price for example. Or if you want to pass the element clicked to another part, such as a shopping cart or something similar. And it will avoid having to be cleaning the contents of the label to obtain only the numerical value.

I have used pure Javascript code. You can use jQuery if you want, but it is recommended to avoid using external libraries when you can do it with pure JS (the code is faster).

I hope it will be useful for you. You can test its operation ...

/*Asignamos un listener a todos los elementos de la clase item*/
var elementsArray = document.querySelectorAll('.item');
elementsArray.forEach(function(elem) {
  elem.addEventListener("dblclick", dobleClick, false);
});
/*Esta es la función definida en el listener*/
function dobleClick() {
  /*Con dataset.[nombre] obtenemos el valor que hay en ese atributo*/
  var stockReduced = this.dataset.stock - 1;
  /*Actualizamos el atributo a [valor-1]*/ 
  this.dataset.stock= stockReduced;
  /*Referencia al label stock*/
  var lblStock = this.getElementsByTagName('label')[2];
  /*Actualizamos el valor numérico de forma dinámica*/
  lblStock.textContent = 'Stock ${stockReduced}';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item_container">
  <div class="item" id="i1" data-stock="10" data-price="20">
    <img src="img/camiseta1.jpg" alt="descripción i1" />
    <label class="title">Camiseta 1</label>
    <label class="price">20 €</label>
    <label class="stock">Stock 10</label>
  </div>
  <div class="item" id="i2" data-stock="10" data-price="24">

    <img src="img/reloj2.jpg" alt="descripción i2" />
    <label class="title">Reloj 2</label>
    <label class="price">24 €</label>
    <label class="stock">Stock 10</label>
  </div>
  <div class="clear"></div>
</div>

The functionality is poorly stated for many reasons, but let's go immediately:

You have two non-event functions $(document).ready({...}) that should work according to their parameters and not coupled to what you define within the aforementioned block. This is correct , you do not want coupling or stepping on general variables within functions.

You declare a listener about $(".stock", $(this)) that refers to as many items as you have for sale. That's right , means that everyone has that behavior.

In particular, when you search

$(".stock", $(this))

Within $(function() {...}) this is the document. For what is interpreted as:

$(".stock", $(document))

The listener invokes a handler dobleClickItems . That's right , since this jQuery handler receives a reference to the item, so, within dobleClickItems , $(this) is the item that has been punctured.

Here comes the problem. Within dobleClickItems llamas to compra . But buying is a common and current function. It is not a jQuery handler. Within compra $(this) you have lost the reference to item , and you have even lost the reference to document . The interpreter is forced to assume that it is a reference to window , and

$(".stock", $(window))

Does not identify any items.

Proposed solution

First, you have N products. You want to check if they have inventory. If yes, you give them the clickable behavior. For this you should check the inventory of each product:

$(".item").each(function() {
  var inventario = ...;
  if(inventario > 0) {
    ... tienen comportamiento doble click...
  }
});

Now, to know if they have inventory, considering that the inventory is in a label, it does not seem right to use the text of the label that, badly, is designed to be a text and not a value. Within the label I would put an input so that it would be:

<label class="stock">Stock 
   <input type="text" readonly value="10">
</label>

And get the stock of each product using:

$(".item").each(function() {
  var inputInventario = $(this).find('input'); 
  var inventario = parseInt(inputInventario.val(), 10);
  if(inventario > 0) {
     $(this).on("dblclick", dobleClickItems);
  }
});

Now each product is clickable or not depending on its own stock, regardless of the product on the side.

When you go to buy, within dobleClickItems you have the reference to the item that has been punctured, so you could do, again:

function dobleClickItems() {
   var inputInventario = $(this).find('input');
   var inventario = parseInt(inputInventario.val(), 10);

   ... más cosas...   
}

And lower the inventory before executing the purchase. The purchase is an act that interacts with the cart and not with the inventory, you do not put responsibility on an area that is foreign:

function dobleClickItems() {
       var inputInventario = $(this).find('input');
       var inventario = parseInt(inputInventario.val(), 10);

    inventario--;
    inputInventario.val(inventario);

    compra($numItems, $precioTotal, $precio);       
}

Notice that I removed the reference to the amount of stock in the purchase function. On the other hand, I would also remove the calculation of the cart items from the dobleClickItems function. In the design, what is done with the items does not know what is done with the cart. What you do with the cart has no idea what you did with the items. Each function has a single responsibility and each other speaks according to the Demeter's law . The less each function knows what the other does, the better.

Aesthetically Produced Solution :

You may not want the inventory to look like an input box. No problem. You could use a label property (eg rel ) to store the available stock, and put a pseudo element that would display the amount of stock without touching the text , but using an attribute. For example, think that you define the stock of product 1 using:

<div class="item" id="i1">
   <label class="stock" rel="10">Stock </label>
</div>

And in the style sheet carro.css you put a pseudo element whose content is the attribute rel of the label:

.item .stock:after {
    content: attr(rel);
    width: 20px;
}

Then, when you would like to know the available stock you would use:

$(".item").each(function() {
  var relInventario = $(this).attr('rel'); 
  var inventario = parseInt(relInventario, 10);
  if(inventario > 0) {
     $(this).on("dblclick", dobleClickItems);
  }
});

And to modify the inventory:

inventario--;
$(this).attr('rel',inventario);

You will see that the pseudo element changes according to the property, without you touching the text: