Hey everybody,

i am implementing a table-style trust game (2 players: both get 10 points at the beginning (a=b=10) with predefined values for Player A. So the participant B can add for each amount sent from A (e.g. A sends 1, B receives 3 (because amount is tripled)) into an integer field defined in player class, the amount he wants to send back (e.g. min=0 and max=3). According to the amount B sends back (lets call it q) there shall be an automatic calculation: for "A gets..." a-1+q and for "You get..." b+3-q. So the participant can see after adding an amount to send back, what each A and the participant gets accordingly. These calculations shall be done for multiple amounts send from A (1,2,3,4,5,6,7,8,9,10 (lets call them x) with each amount tripled (lets call them y)), so the formulas would look something like this "A gets..." a-x+q and for "You get..." b+y-q.

I have a html code which works in the front but there are no values stored, so the participant can choose its amounts and gets the results for a and himself displayed, but in the evaluation there are no values displayed.

Here the htmlcode with the java script calculation at the very end BUT in this code there are no defined integerfields, the input fields are added just through html code:

<table class="table">
  <tr>
    <th>Participant A</th>
    <th>Participant B</th>
    <th>Send back?</th>
    <th>A gets...</th>
    <th>You get...</th>
  </tr>
  <tr>
    <td>A sent you 1 point.</td>
    <td>You receive 3 points.</td>
    <td><input type="number" id="input1" max="3" onchange="calculatePoints(1)" /></td>
    <td id="aPoints1"></td>
    <td id="bPoints1"></td>
  </tr>
  <tr>
    <td>A sent you 2 points.</td>
    <td>You receive 6 points.</td>
    <td><input type="number" id="input2" max="6" onchange="calculatePoints(2)" /></td>
    <td id="aPoints2"></td>
    <td id="bPoints2"></td>
  </tr>
  <tr>
    <td>A sent you 3 points.</td>
    <td>You receive 9 points.</td>
    <td><input type="number" id="input3" max="9" onchange="calculatePoints(3)" /></td>
    <td id="aPoints3"></td>
    <td id="bPoints3"></td>
  </tr>
  <tr>
    <td>A sent you 4 points.</td>
    <td>You receive 12 points.</td>
    <td><input type="number" id="input4" max="12" onchange="calculatePoints(4)" /></td>
    <td id="aPoints4"></td>
    <td id="bPoints4"></td>
  </tr>
  <tr>
    <td>A sent you 5 points.</td>
    <td>You receive 15 points.</td>
    <td><input type="number" id="input5" max="15" onchange="calculatePoints(5)" /></td>
    <td id="aPoints5"></td>
    <td id="bPoints5"></td>
  </tr>
  <tr>
    <td>A sent you 6 points.</td>
    <td>You receive 18 points.</td>
    <td><input type="number" id="input6" max="18" onchange="calculatePoints(6)" /></td>
    <td id="aPoints6"></td>
    <td id="bPoints6"></td>
  </tr>
  <tr>
    <td>A sent you 7 points.</td>
    <td>You receive 21 points.</td>
    <td><input type="number" id="input7" max="21" onchange="calculatePoints(7)" /></td>
    <td id="aPoints7"></td>
    <td id="bPoints7"></td>
  </tr>
  <tr>
    <td>A sent you 8 points.</td>
    <td>You receive 24 points.</td>
    <td><input type="number" id="input8" max="24" onchange="calculatePoints(8)" /></td>
    <td id="aPoints8"></td>
    <td id="bPoints8"></td>
  </tr>
  <tr>
    <td>A sent you 9 points.</td>
    <td>You receive 27 points.</td>
    <td><input type="number" id="input9" max="27" onchange="calculatePoints(9)" /></td>
    <td id="aPoints9"></td>
    <td id="bPoints9"></td>
  </tr>
  <tr>
    <td>A sent you 10 points.</td>
    <td>You receive 30 points.</td>
    <td><input type="number" id="input10" max="30" onchange="calculatePoints(10)" /></td>
    <td id="aPoints10"></td>
    <td id="bPoints10"></td>
  </tr>
</table>

<script>
  function calculatePoints(row) {
    var xValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var yValues = [3, 6, 9, 12, 15, 18, 21, 24, 27, 30];
    var a = 10;
    var b = 10;
    
    var input = document.getElementById("input" + row);
    var q = parseInt(input.value);
    
    var x = xValues[row - 1];
    var y = yValues[row - 1];
    
    var aPoints = a - x + q;
    var bPoints = b + y - q;
    
    document.getElementById("aPoints" + row).textContent = aPoints;
    document.getElementById("bPoints" + row).textContent = bPoints;
  }
</script>

I am really struggling, so i would appreciate any help.