I’ve modified the Websockets example in Chapter 2.3 to display 2 cards.  Each cards has a number of buttons plus one response field to show the last button pressed & processed by the server.  Whenever I press a button on either card, it’s always the same response field that gets updated. How can I make the code update the response field relating to the card holding the button which was pressed?

I thought modifying the onMessage function in script.js might do it as shown below – but no.  I tried making the onMessage function trivial (see second version below).  But that didn’t update either response field.  Is onMessage even getting invoked???

Many thanks in advance for suggestions.
Les

Extract from Index.html

<div class=”content”>
<div class=”card-grid”>
<div class=”card”>
<p class=”card-title”><i class=”fas fa-lightbulb”></i>Speed</p>
<p>
<button class=”button-off” id=”bMedium”>Medium</button>
<button class=”button-off” id=”bFast”>Fast</button>
</p>
<p class=”state”>Speed: <span id=”speedNow”>%SPEEDNOW%</span></p>
</div>
<div class=”card”>
<p class=”card-title”><i class=”fas fa-lightbulb”></i>Direction</p>
<p>
<button class=”button-on” id=”bForward”>Forward</button>
<button class=”button-on” id=”bReverse”>Reverse</button>
</p>
<p class=”state”>Direction: <span id=”directionNow”>%DIRECTIONNOW%</span></p>
</div>
</div>
</div>
<script src=”script.js”></script>

Extract from script.js showing onMessage

function onMessage(event) {
if (event.data==’Forward’) {
document.getElementById(‘directionNow’).innerHTML = event.data;
}
else {
document.getElementById(‘speedNow’).innerHTML = event.data;
}
console.log(event.data);
}

Simpler OnMessage test version

function onMessage(event) {
document.getElementById(‘directionNow’).innerHTML = event.data;
document.getElementById(‘speedNow’).innerHTML = event.data;
console.log(event.data);
}