Изменение прозрачности текста по нажатию на кнопку

Question

Хотел бы узнать, как на кнопки можно "повесить" функцию изменения прозрачности текста

function p1() {
  var n = parseFloat(document.getElementById("n").value);
  var m = parseFloat(document.getElementById("m").value);
  var sum = 0;
  for (var i=1; i<=n; i++){
    for(var j=1; j<=m; j++){
      sum = sum + (4*i-j);
      document.getElementById('result').innerHTML = (sum);
    }
  }
}

function r1() {
  document.body.classList.toggle("button1");
}
function r2() {
  document.body.classList.toggle("button2");
}
function r3() {
  document.body.classList.toggle("button3");
}

 body.button1 {
  color: rgba(0, 0, 0, 1);
}
 body.button3 {
  color: rgba(0, 0, 0, 0.5);
}
 body.button2{
  color: rgba(0, 0, 0, 0.75);
}

    <center><img src="haha.png">
        <div>
            <form>
                <div class="test">Текст</div>
                <div style="width:50%; float:left;">
                    <alert>Введите m: </alert>
                    <input size="10" type="text" id="m" value="1" /><br />
                    <alert>Введите n: </alert>
                    <input size="10" type="text" id="n" value="1" /><br />
                    <input type="button" value="Решение" onclick="p1()" /><br>
                    <div id="result"></div>
                </div>
                <div style="width:50%; float:right;">
                    <button type="radio" id="f1" name="f1" onclick="r1"><label for="f1">100%</label></button><br>
                    <button type="radio" id="f2" name="f2" onclick="r2"><label for="f2">75%</label></button><br>
                    <button type="radio" id="f3" name="f3" onclick="r3"><label for="f3">50%</label></button><br>
                </div>
            </form>
        </div>
    </center>

Заранее благодарю за помощь

Answer 1

Если соблюдать вашу стилистику, то можно сделать вот так:

        function r1() {
    document.getElementById('c1').style.color = 'rgba(0, 0, 0, 1)';
}
function r2() {
    document.getElementById('c1').style.color = 'rgba(0, 0, 0, 0.5)';
}
function r3() {
    document.getElementById('c1').style.color = 'rgba(0, 0, 0, 0.2)';
}

<div style="width:50%; float:right;">
            <button id="f1" name="f1" onclick="r1()"><label for="f1">100%</label></button><br>
            <button id="f2" name="f2" onclick="r2()"><label for="f2">50%</label></button><br>
            <button id="f3" name="f3" onclick="r3()"><label for="f3">20%</label></button><br>
        </div>

        <div id="c1">Этот цвет будет менять свою прозрачность по нажатию на кнопку</div>

Каждая кнопка будет вызывать отдельную функцию, в которой меняется стиль заданного элемента.

Использовать classList.toggle() надо там, где надо добавит один класс и его удалить, если он есть.

Для примера ниже ваш код, только он устанавливает не цвет текста, а цвет фона с некоторой прозрачностью.

function r1() {
    document.getElementById('f1').classList.toggle('s100');
}
function r2() {
    document.getElementById('f2').classList.toggle('s75');
}
function r3() {
    document.getElementById('f3').classList.toggle('s50');
}

.s100 {
    background-color: rgba(0, 0, 0, 1);
}
.s75 {
    background-color: rgba(0, 0, 0, 0.75);
}
.s50 {
    background-color: rgba(0, 0, 0, 0.5);
}

<div style="width:50%; float:right;">
            <button id="f1" name="f1" onclick="r1()"><label for="f1">100%</label></button><br>
            <button id="f2" name="f2" onclick="r2()"><label for="f2">50%</label></button><br>
            <button id="f3" name="f3" onclick="r3()"><label for="f3">20%</label></button><br>
        </div>

БЛОГ НА HUSL

Изменение прозрачности текста по нажатию на кнопку

Ответы (1 шт):