如何根据选中的单选按钮动态更新<span>元素？

我的Web应用有一个Mustache页面，用来展示用户的所有工位预订信息，还允许用户通过单选按钮选择其中一项。我想在用户点击单选按钮时，动态更新页面里<span>标签的消息内容，但目前写的代码点击单选按钮完全没反应。

以下是我目前尝试的代码：

<html>
   <body>
     <h3>Bookings:</h3>
     {{#bookings}}
       <p>Workspace: {{workspace}}</p>
       <p>Date: {{date}}</p>
       <p>Time: {{time}}</span></p>
       <div class="radio-wrapper">
         <input id="booking" name="booking" type="radio" onclick="updateMessage(this)" data-workspace="{{workspace}}" data-date="{{date}}" data-time="{{time}}">
       </div>
     {{/bookings}}
     <h3>Message:</h3>
     <div id="message">
       <p>
         Hi team,
         I just booked a workstation at the office. Let's collaborate! Details are below:
         <b>Date:</b> <span data-field="date"></span>
         <b>Time:</b> <span data-field="time"></span>
         <b>Workstation:</b> <span data-field="workspace"></span>
       </p>
     </div>
     <script>
       function updateMessage(radioButton) {
         if (radioButton.checked) {
           const workspace = radioButton.getAttribute('data-workspace');
           const date = radioButton.getAttribute('data-date');
           const time = radioButton.getAttribute('data-time');
           const message = document.getElementById('message');
           const dateElement = message.querySelector('b[data-field="date"]');
           const timeElement = message.querySelector('b[data-field="time"]');
           const workspaceElement = message.querySelector('b[data-field="workspace"]');
           dateElement.textContent = date;
           timeElement.textContent = time;
           workspaceElement.textContent = workspace;
         }
       }
     </script>
   </body>
 </html>

你的代码存在三个关键问题导致功能失效：

1. 重复ID属性：Mustache循环生成的每个单选按钮都用了id="booking"，HTML中ID必须唯一，重复ID会导致浏览器无法正确识别元素，建议移除该ID（单选组功能由name="booking"保证），或者改为动态唯一值比如id="booking-{{workspace}}-{{date}}"。

2. 元素选择器错误：原代码尝试选择b[data-field="date"]这类元素，但实际data-field属性是在<span>标签上，不是<b>标签，导致找不到目标元素无法更新内容，需要把选择器改为span[data-field="date"]。

3. 标签闭合错误：代码里<p>Time: {{time}}</span></p>多了一个</span>，属于无效HTML，会干扰DOM结构解析，需修正为<p>Time: {{time}}</p>。

<html>
   <body>
     <h3>Bookings:</h3>
     {{#bookings}}
       <p>Workspace: {{workspace}}</p>
       <p>Date: {{date}}</p>
       <p>Time: {{time}}</p>
       <div class="radio-wrapper">
         <!-- 移除重复ID，保留name保证单选组功能 -->
         <input name="booking" type="radio" onclick="updateMessage(this)" data-workspace="{{workspace}}" data-date="{{date}}" data-time="{{time}}">
       </div>
     {{/bookings}}
     <h3>Message:</h3>
     <div id="message">
       <p>
         Hi team,
         I just booked a workstation at the office. Let's collaborate! Details are below:
         <b>Date:</b> <span data-field="date"></span>
         <b>Time:</b> <span data-field="time"></span>
         <b>Workstation:</b> <span data-field="workspace"></span>
       </p>
     </div>
     <script>
       function updateMessage(radioButton) {
         if (radioButton.checked) {
           // 用dataset访问data属性更简洁
           const workspace = radioButton.dataset.workspace;
           const date = radioButton.dataset.date;
           const time = radioButton.dataset.time;
           const message = document.getElementById('message');
           // 修正选择器，目标是span标签
           const dateElement = message.querySelector('span[data-field="date"]');
           const timeElement = message.querySelector('span[data-field="time"]');
           const workspaceElement = message.querySelector('span[data-field="workspace"]');
           dateElement.textContent = date;
           timeElement.textContent = time;
           workspaceElement.textContent = workspace;
         }
       }
     </script>
   </body>
 </html>

内容的提问来源于stack exchange，提问作者mayo09876