我的网络应用程序中的一个小胡子页面显示了所有用户的桌面预订，并允许他们使用单选按钮选择一个。我想在同一页面上的跨度标签内显示的消息，以动态更新，这取决于他们使用JavaScript（或任何其他更简单的方式）点击单选按钮。
这是我到目前为止尝试过的，但目前为止，当选择单选按钮时没有任何React：
<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条答案
按热度按时间oaxa6hgo1#
你的选择器错了