how can I inspect the value of inputs inside a hidden DIV

Question

I have a tax calculator with many inputs which pass data to each other. The user only sees one input and the other inputs are in a hidden div (used just for calculation propose).

the Google-Chrome element inspector not showing the value of inputs when they are in hidden div (however it shows the value of inputs with attribute type="hidden"). So how can I inspect and debug the form with hidden divs?

    $(document).ready(function(){
      $("#price").on("input paste keyup",function(){
      var power=$("#power").val();
      $("#taxSet").val(parseInt($("#price").val()) * 0.1);
      $("#taxAmount").val(parseInt($("#taxSet").val())*power  + 
      parseInt($("#price").val()));
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="price">
<div style="display:none">
   <input id="power" value="5">
   <input id="taxSet">
   <input id="taxAmount">
</div>

Answer 1

Did you mean "I can't see attribute on DOM" like #power?.

My first suggest use attr, so change attribute value.

var fakeValye = 10;
$("..blah").val(fakeValue).attr('value', fakeValue);

If you don't say this, you just talking about debugging. You should use debugger keyword.

I refactored your code for you.

$(document).ready(function() {
    $("#price").on("input paste keyup", function() {
  debugger;
        var power = $("#power").val();
  var taxtSet = parseInt($("#price").val()) * 0.1;
        $("#taxSet").val(taxtSet);
  var taxAmount = parseInt($("#taxSet").val()) * power + parseInt($("#price").val())
        $("#taxAmount").val(taxAmount);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="price">
<div style="display:none">
   <input id="power" value="5">
   <input id="taxSet">
   <input id="taxAmount">
</div>