如何更改连接多个ID以使用html和javascript中的输入更改颜色

Question

我有一个网页，当我输入静音或静音文本时，我希望对其进行远程控制或通过触摸屏进行操作。这是我目前要查看的代码，如果单击该静音键，它将变成红色；如果将init更改为on，则单击该颜色时，它将变为绿色。我想知道如何将其与我想用id =“ text”和id =“ text1”处理的html代码合并。请指教。我想要输入静音的功能，并且text或text1的id变为绿色，而静音将text或text1变为红色。谢谢！

HTML：

<div id="muteon">MuteOn</div>
<div id="mute">Mute</div>
<input onclick="off()"

Javascript：

function off() {
  document.getElementById("muteon").style.color = 'red';
}

function on() {
  document.getElementById("mute").style.color = 'green';
}

我要操作的HTML代码

<div class="flex-col-c p-t-0 p-b-10 respon1">
<h1 class="l1-txt1 txt-center p-t-0 p-b-10">
<font color="white" style="font-weight: 600;">
<p id="text1"></font></p>
</h1>

<h1 class="l1-txt1 txt-center p-t-0 p-b-60"><p>
<font color="crimson" style="font-weight: 600;">
<p id="text"></font></p>

Answer 1

我只切换父级的类：

<div class="mute-container">
    <div class="mute-on">Mute On</div>
    <div class="mute-off">Mute Off</div>
</div>

JavaScript：

function toggleMute() {
    document.querySelector('.mute-container').classList.toggle('on');
}

CSS：

.mute-container.on .mute-on {
    color: red;
}

.mute-container:not(.on) .mute-off {
    color: green;
}