Изменить фон и цвет текста, нажав на кнопку - PullRequest
Новая
       1

Изменить фон и цвет текста, нажав на кнопку

0 голосов
/ 05 сентября 2018

Я хочу реализовать кнопку, которая мгновенно меняет цвет фона и цвет текста. Цвета предварительно определены в массиве.

Фрагмент кода 

<?php

include 'src/wordlist.php';
include 'src/colorcodes.php';

$result1 = $one[array_rand($one)] . " " . $two[array_rand($two)];

$colormix1 = $colors[array_rand($colors)];
$colormix2 = $colors[array_rand($colors)];

if ($colormix1 == $colormix2) {
    $colormix2 = $colors[array_rand($colors)];
}

?>

<!DOCTYPE html>
<html>
<head>
</head>

<body style="background: <?php echo $colormix2; ?>;">
    <div class="table_1">
        <table>
            <tr>
                <th>
                    HEADER
                </th>
            </tr>
            <tr>
                <td>
                    <p style="color: <?php echo $colormix1; ?>;">&#187; <?php echo $result1; ?>. &#171;</p>
                </td>
            </tr>

        </table>
        </div>
     </body>
</html>

Как мне добиться этого только с помощью JavaScript?

Заранее спасибо!

// EDIT:

Я нашел решение: 

function changeBackground() {
    var colormix1 = colorcodes[Math.floor(Math.random() * colorcodes.length)];
    var colormix2 = colorcodes[Math.floor(Math.random() * colorcodes.length)];

    if (colormix1 == colormix2) {
    var colormix2 = colorcodes[Math.floor(Math.random() * colorcodes.length)];  
    }
    document.getElementById("quote").style.color = colormix1;
    document.getElementById("footer").style.background = colormix1;
    document.getElementById("ft-button").style.backgroundColor = colormix1;
    document.getElementById("ft-button").style.color = colormix2;
    document.getElementById("background").style.background = colormix2;
    }
</script>

Вызывая элементы по их идентификатору, он работал просто отлично.

1 Ответ

0 голосов
/ 05 сентября 2018

Это довольно просто сделать в JS. Пожалуйста, обратитесь DOM API для более подробной информации

Запустите этот фрагмент кода для демонстрации 

function changeBackground(value) {
  var bgElement = document.getElementsByClassName('background')[0];
  var textElement = document.getElementsByClassName('text')[0];

  if (bgElement) {
    bgElement.style.background = value;
  }

  if (textElement) {
    textElement.style.color = value;
  }
}
.background {
  width: 100vw;
  height: 100vh;
  background: #000;
}

.dropdown {
  width: 150px;
  height: 32px;
  margin: 16px;
}

.text {
  font-size: 16px;
  color: #000;
  margin: 16px;
}
<div class="text">
  This is some text
</div>
<div class="background">
  <select class="dropdown" onchange="changeBackground(value)">
    <option value="#F44336">Red</option>
    <option value="#E91E63">Pink</option>
    <option value="#9C27B0">Purple</option>
    <option value="#673AB7">Deep purple</option>
    <option value="#3F51B5">Indigo</option>
    <option value="#FFFFFF">White</option>
    <option value="#000000">Black</option>
  </select>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...