Как изменить несколько идентификаторов подключения, чтобы изменить цвет, используя ввод в html и javascript - PullRequest
Новая
       27

Как изменить несколько идентификаторов подключения, чтобы изменить цвет, используя ввод в html и javascript

2 голосов
/ 21 апреля 2020

У меня есть веб-страница, которой я хочу управлять удаленно или с помощью сенсорного экрана при вводе беззвучного или мутеонного текста. Это текущий код, который мне нужен, чтобы, если щелкнуть по нему, мутеон станет красным, а если init включен, то при нажатии цвет изменится на зеленый. Я хочу знать, как бы я включил это с кодом html, которым я хочу манипулировать с id = "text" и id = "text1". Пожалуйста, порекомендуйте. Я хочу, чтобы была возможность отключения звука, а идентификатор текста или text1 становится зеленым, а muteon, где текст или 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>

1 Ответ

3 голосов
/ 21 апреля 2020

Я бы просто переключил класс родителя: 

<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;
}
...