Live Page Updating of HTML-Page: only the first of two tables updates

#1 by TimoPromann
Hi,

my general setup is a group of 4, which I seperate to have two groups of 2, who are video chatting and simultaneously working on some questions. For each group of 2, there is a table on the HTML-page (for each group of 2, only one table is displayed). These two tables shall be updated by my function liveRecv(data). However, only the upper table updates. If I switch both tables within the function, again, the upper table (so the one which was not updating when it was at the lower end of the function) updates.

Here is the code of my liveRecv(data) function:

function liveRecv(data) {
        history2.innerHTML = '<tr><td rowspan="2" class="col-6" style="text-align: center; vertical-align: middle"> Questions' + '</td><td rowspan="2" class="col-2" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px"> Proposed Answers' + '</td><td class="col-2" colspan="2" style="text-align: center; border-left: solid 0 #C8C8C8; border-left-width:1px"> Team acceptance' + '</td><td rowspan="2" colspan="2" class="col-2" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px"> Your Choice' + '</td></tr>'
        + '<tr><td class="col-1" style="text-align: center; border-left: solid 0 #C8C8C8; border-left-width:1px"> {{if player.new_id_in_group == 1}} You {{else}} Partner {{endif}}' + '</td><td class="col-1" style="text-align: center"> {{if player.new_id_in_group == 2}} You {{else}} Partner {{endif}}' + '</td></tr>'
        + '<tr><td class="col-6"> 1) Name a word that most people yell at their dogs.' + '</td><td class="col-2" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.answer_q1_g1 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.acceptance_p1_q1_g1 + '</td><td class="col-1" style="text-align: center; vertical-align: middle">' + data.acceptance_p2_q1_g1 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px"><button class="btn btn-primary" type="button" onclick="sendValue11_g1()" style="background-color:#008000">Accept</button>' + '</td><td class="col-1" style="text-align: center; vertical-align: middle"><button class="btn btn-primary" type="button" onclick="sendValue12_g1()" style="background-color:#ff0000">Reject</button>' + '</td><tr>'
        + '<tr><td class="col-6"> 2) Name a musical instrument that is too big to carry on an airplane.' + '</td><td class="col-2" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.answer_q2_g1 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.acceptance_p1_q2_g1 + '</td><td class="col-1" style="text-align: center; vertical-align: middle">' + data.acceptance_p2_q2_g1 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px"><button class="btn btn-primary" type="button" onclick="sendValue21_g1()" style="background-color:#008000">Accept</button>' + '</td><td class="col-1" style="text-align: center; vertical-align: middle"><button class="btn btn-primary" type="button" onclick="sendValue22_g1()" style="background-color:#ff0000">Reject</button>' + '</td></tr>'
        + '<tr><td class="col-6"> 3) If a witch was not paying attention to where she was flying, name something she might crash into.' + '</td><td class="col-2" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.answer_q3_g1 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.acceptance_p1_q3_g1 + '</td><td class="col-1" style="text-align: center; vertical-align: middle">' + data.acceptance_p2_q3_g1 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px"><button class="btn btn-primary" type="button" onclick="sendValue31_g1()" style="background-color:#008000">Accept</button>' + '</td><td class="col-1" style="text-align: center; vertical-align: middle"><button class="btn btn-primary" type="button" onclick="sendValue32_g1()" style="background-color:#ff0000">Reject</button>' + '</td></tr>'
        + '<tr><td class="col-6"> 4) Name a word a judge might yell out during a tennis match.' + '</td><td class="col-2" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.answer_q4_g1 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.acceptance_p1_q4_g1 + '</td><td class="col-1" style="text-align: center; vertical-align: middle">' + data.acceptance_p2_q4_g1 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px"><button class="btn btn-primary" type="button" onclick="sendValue41_g1()" style="background-color:#008000">Accept</button>' + '</td><td class="col-1" style="text-align: center; vertical-align: middle"><button class="btn btn-primary" type="button" onclick="sendValue42_g1()" style="background-color:#ff0000">Reject</button>' + '</td></tr>'
        + '<tr><td class="col-6"> 5) Name a bad sport for someone who is afraid of the water.' + '</td><td class="col-2" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.answer_q5_g1 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.acceptance_p1_q5_g1 + '</td><td class="col-1" style="text-align: center; vertical-align: middle">' + data.acceptance_p2_q5_g1 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px"><button class="btn btn-primary" type="button" onclick="sendValue51_g1()" style="background-color:#008000">Accept</button>' + '</td><td class="col-1" style="text-align: center; vertical-align: middle"><button class="btn btn-primary" type="button" onclick="sendValue52_g1()" style="background-color:#ff0000">Reject</button>' + '</td></tr>';
        history3.innerHTML = '<tr><td rowspan="2" class="col-6" style="text-align: center; vertical-align: middle"> Questions' + '</td><td rowspan="2" class="col-2" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px"> Proposed Answers' + '</td><td class="col-2" colspan="2" style="text-align: center; border-left: solid 0 #C8C8C8; border-left-width:1px"> Team acceptance' + '</td><td rowspan="2" colspan="2" class="col-2" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px"> Your Choice' + '</td></tr>'
        + '<tr><td class="col-1" style="text-align: center; border-left: solid 0 #C8C8C8; border-left-width:1px"> {{if player.new_id_in_group == 1}} You {{else}} Partner {{endif}}' + '</td><td class="col-1" style="text-align: center"> {{if player.new_id_in_group == 2}} You {{else}} Partner {{endif}}' + '</td></tr>'
        + '<tr><td class="col-6"> 1) Name a word that most people yell at their dogs.' + '</td><td class="col-2" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.answer_q1_g2 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.acceptance_p1_q1_g2 + '</td><td class="col-1" style="text-align: center; vertical-align: middle">' + data.acceptance_p2_q1_g2 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px"><button class="btn btn-primary" type="button" onclick="sendValue11_g2()" style="background-color:#008000">Accept</button>' + '</td><td class="col-1" style="text-align: center; vertical-align: middle"><button class="btn btn-primary" type="button" onclick="sendValue12_g2()" style="background-color:#ff0000">Reject</button>' + '</td><tr>'
        + '<tr><td class="col-6"> 2) Name a musical instrument that is too big to carry on an airplane.' + '</td><td class="col-2" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.answer_q2_g2 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.acceptance_p1_q2_g2 + '</td><td class="col-1" style="text-align: center; vertical-align: middle">' + data.acceptance_p2_q2_g2 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px"><button class="btn btn-primary" type="button" onclick="sendValue21_g2()" style="background-color:#008000">Accept</button>' + '</td><td class="col-1" style="text-align: center; vertical-align: middle"><button class="btn btn-primary" type="button" onclick="sendValue22_g2()" style="background-color:#ff0000">Reject</button>' + '</td></tr>'
        + '<tr><td class="col-6"> 3) If a witch was not paying attention to where she was flying, name something she might crash into.' + '</td><td class="col-2" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.answer_q3_g2 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.acceptance_p1_q3_g2 + '</td><td class="col-1" style="text-align: center; vertical-align: middle">' + data.acceptance_p2_q3_g2 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px"><button class="btn btn-primary" type="button" onclick="sendValue31_g2()" style="background-color:#008000">Accept</button>' + '</td><td class="col-1" style="text-align: center; vertical-align: middle"><button class="btn btn-primary" type="button" onclick="sendValue32_g2()" style="background-color:#ff0000">Reject</button>' + '</td></tr>'
        + '<tr><td class="col-6"> 4) Name a word a judge might yell out during a tennis match.' + '</td><td class="col-2" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.answer_q4_g2 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.acceptance_p1_q4_g2 + '</td><td class="col-1" style="text-align: center; vertical-align: middle">' + data.acceptance_p2_q4_g2 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px"><button class="btn btn-primary" type="button" onclick="sendValue41_g2()" style="background-color:#008000">Accept</button>' + '</td><td class="col-1" style="text-align: center; vertical-align: middle"><button class="btn btn-primary" type="button" onclick="sendValue42_g2()" style="background-color:#ff0000">Reject</button>' + '</td></tr>'
        + '<tr><td class="col-6"> 5) Name a bad sport for someone who is afraid of the water.' + '</td><td class="col-2" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.answer_q5_g2 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px">' + data.acceptance_p1_q5_g2 + '</td><td class="col-1" style="text-align: center; vertical-align: middle">' + data.acceptance_p2_q5_g2 + '</td><td class="col-1" style="text-align: center; vertical-align: middle; border-left: solid 0 #C8C8C8; border-left-width:1px"><button class="btn btn-primary" type="button" onclick="sendValue51_g2()" style="background-color:#008000">Accept</button>' + '</td><td class="col-1" style="text-align: center; vertical-align: middle"><button class="btn btn-primary" type="button" onclick="sendValue52_g2()" style="background-color:#ff0000">Reject</button>' + '</td></tr>';
}

I am thankful for any helpful suggestions.

Best,
Timo
Live Page Updating of HTML-Page: only the first of two tables updates

Write a reply
