Input text value does not change when triggered by the button

Question

I have an extra button on the screen that increments +1 on top of the current value of the input, when I make an Alert in the variable presents the normal value incrementing +1 but in the field on screen the value does not change, always zero, what am I doing wrong? Can anyone help me? Follow the code:

<div class="col-md-12 col-sm-12 col-xs-12" style="margin:0;padding:0;">
                                      <div class="col-md-6 col-sm-6 col-xs-6" style="margin:0;padding:0;float:left;width:60%;">
                                        <h6 style="float:left;"><?echo utf8_encode($rowAdicionaisProduct['ingredient']);?></h6>
                                        <small style="float:left;clear:both;color:#ED3237;padding:0px;line-height:10px;"><b>+ R$<?=$rowAdicionaisProduct['unit_price']?></b></small>
                                      </div>
                                      <input type="hidden" name="idIngredientAdds[]" value="<?=$idIngredientAdicional?>">
                                      <input type="hidden" name="ingredient[]" value="<?echo utf8_encode($rowAdicionaisProduct['ingredient']);?>">
                                      <input type="hidden" name="priceAdd[]" id="adicionalPrice<?=$idIngredientAdicional?>" value="<?=$adicionalPrice?>">
                                      <button type="button" class="btnChangeQtdAdd" style="float:left;background:transparent;border:none;margin-top:-15px;" id="decAdd<?=$idIngredientAdicional?>" onclick ="subtrairMenos1Add<?=$idIngredientAdicional?>();"><i style="font-size:19px;color:#ED3237;" class="fa fa-minus"></i></button>
                                      <input type="text" name="qtd_option[]" class="qtdAdicionais" id="qtdIngredientAdicional<?=$idIngredientAdicional?>" style="width:30px;float:left;height:30px;text-align:center;margin-top:-20px;" value="0">
                                      <button type="button" class="btnChangeQtdAdd" style="float:left;background:transparent;border:none;margin-top:-15px;" id="inc<?=$idIngredientAdicional?>" onclick="somarMais1Add<?=$idIngredientAdicional?>();"><i style="font-size:19px;color:#ED3237;" class="fa fa-plus"></i></button>
                                    </div>
                                    <script>
                                      function somarMais1Add<?=$idIngredientAdicional?>() {
                                          var n1 = document.getElementById("qtdIngredientAdicional<?=$idIngredientAdicional?>").val;
                                          var n2 = 1;
                                          document.getElementById("qtdIngredientAdicional<?=$idIngredientAdicional?>").val = n1 + 1;
                                      };
                                    </script>

Answer 1

The way you’re doing it is very bad. Instead of repeating the script and creating id-based functions from the PHP loop, you can create only a single function both to increment the value in the input and to decrement. Just send to the function two parameters: the id input and other value that can identify when to add or when to subtract.

For example:

onclick="somarSubtrair('<?=$idIngredientAdicional?>');" // para subtrair
onclick="somarSubtrair('<?=$idIngredientAdicional?>', true);" // para somar

The true in the second parameter means you want to add up. If the second parameter is empty, it means you want to subtract.

The function would look like this:

function somarSubtrair(id, oper) {
   var n1 = +document.getElementById("qtdIngredientAdicional"+id).value;
   document.getElementById("qtdIngredientAdicional"+id).value = n1 + (oper ? +1 : -1);
};

See that is concatenated the id in the document.getElementById and is used .value and not .val how are you doing.

Before document.getElementById added a sign of + to convert the field value to number type to sum.

The ternary operator (oper ? +1 : -1) will check if the parameter oper is true and add +1, otherwise (if empty) will do -1.

In short, you should put the <script> out of the PHP loop and change the onclick of buttons, something like that:

<?php
while(condição){
?>
<div class="col-md-12 col-sm-12 col-xs-12" style="margin:0;padding:0;">
   <div class="col-md-6 col-sm-6 col-xs-6" style="margin:0;padding:0;float:left;width:60%;">
      <h6 style="float:left;"><?echo utf8_encode($rowAdicionaisProduct['ingredient']);?></h6>
      <small style="float:left;clear:both;color:#ED3237;padding:0px;line-height:10px;"><b>+ R$<?=$rowAdicionaisProduct['unit_price']?></b></small>
   </div>
   <input type="hidden" name="idIngredientAdds[]" value="<?=$idIngredientAdicional?>">
   <input type="hidden" name="ingredient[]" value="<?echo utf8_encode($rowAdicionaisProduct['ingredient']);?>">
   <input type="hidden" name="priceAdd[]" id="adicionalPrice<?=$idIngredientAdicional?>" value="<?=$adicionalPrice?>">
   <button type="button" class="btnChangeQtdAdd" style="float:left;background:transparent;border:none;margin-top:-15px;" id="decAdd<?=$idIngredientAdicional?>" onclick ="somarSubtrair('<?=$idIngredientAdicional?>');"><i style="font-size:19px;color:#ED3237;" class="fa fa-minus"></i></button>
   <input type="text" name="qtd_option[]" class="qtdAdicionais" id="qtdIngredientAdicional<?=$idIngredientAdicional?>" style="width:30px;float:left;height:30px;text-align:center;margin-top:-20px;" value="0">
   <button type="button" class="btnChangeQtdAdd" style="float:left;background:transparent;border:none;margin-top:-15px;" id="inc<?=$idIngredientAdicional?>" onclick="somarSubtrair('<?=$idIngredientAdicional?>', true);"><i style="font-size:19px;color:#ED3237;" class="fa fa-plus"></i></button>
</div>
<?php
}
?>

<script>
function somarSubtrair(id, oper) {
   var n1 = +document.getElementById("qtdIngredientAdicional"+id).value;
   document.getElementById("qtdIngredientAdicional"+id).value = n1 + (oper ? +1 : -1);
};
</script>

Working example:

function somarSubtrair(id, oper) {
   var n1 = +document.getElementById("qtdIngredientAdicional"+id).value;
   document.getElementById("qtdIngredientAdicional"+id).value = n1 + (oper ? +1 : -1);
};

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div style="overflow: hidden;">
   <button type="button" class="btnChangeQtdAdd" style="float:left;background:transparent;border:none;" id="decAdd<?=$idIngredientAdicional?>" onclick ="somarSubtrair('22');"><i style="font-size:19px;color:#ED3237;" class="fa fa-minus"></i></button>
   <input type="text" name="qtd_option[]" class="qtdAdicionais" id="qtdIngredientAdicional22" style="width:30px;float:left;height:30px;text-align:center;" value="0">
   <button type="button" class="btnChangeQtdAdd" style="float:left;background:transparent;border:none;" id="inc<?=$idIngredientAdicional?>" onclick="somarSubtrair('22', true);"><i style="font-size:19px;color:#ED3237;" class="fa fa-plus"></i></button>
</div>
<div style="overflow: hidden;">
   <button type="button" class="btnChangeQtdAdd" style="float:left;background:transparent;border:none;" id="decAdd<?=$idIngredientAdicional?>" onclick ="somarSubtrair('23');"><i style="font-size:19px;color:#ED3237;" class="fa fa-minus"></i></button>
   <input type="text" name="qtd_option[]" class="qtdAdicionais" id="qtdIngredientAdicional23" style="width:30px;float:left;height:30px;text-align:center;" value="0">
   <button type="button" class="btnChangeQtdAdd" style="float:left;background:transparent;border:none;" id="inc<?=$idIngredientAdicional?>" onclick="somarSubtrair('23', true);"><i style="font-size:19px;color:#ED3237;" class="fa fa-plus"></i></button>
</div>

Answer 2

Change your function as follows:

 
                                      function somarMais1Add<?=$idIngredientAdicional?>() {
                                          var n1 = parseInt(document.getElementById("qtdIngredientAdicional<?=$idIngredientAdicional?>").value);
                                          var n2 = 1;
                                          document.getElementById("qtdIngredientAdicional<?=$idIngredientAdicional?>").value = n1 + 1;
                                      };