Как мне сделать мой HTML текст динамически изменяющимся? - PullRequest
Новая
       3

Как мне сделать мой HTML текст динамически изменяющимся?

1 голос
/ 10 апреля 2020

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

const button = document.querySelector('.button');
const body = document.querySelector('#body-background');
var colors = ['red', 'blue', 'green', 'yellow', 'white'];

button.addEventListener('click', function(e) {
  var colorIndex = parseInt(Math.random() * colors.length);
  body.style.backgroundColor = colors[colorIndex];
})
<body id="body-background">
  <div>
    <h1 class="hex-codes">#FFC0CB</h1>
  </div>
  <div>
    <button class="button">CLICK ME!</button>
  </div>
</body>

Ответы [ 3 ]

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

Это совершенно то же самое, и вы можете сделать это различными способами, и я рекомендую вам научиться , как использовать css с javascript

Так что, когда вы хотите для изменения цвета фона вы используете background-color, а когда вы хотите изменить цвет текста, вы используете color и innerText: 

const button = document.querySelector('.button');
const text = document.querySelector('#dynamic-text');
var colors = ['red', 'blue', 'green', 'yellow', 'white'];

button.addEventListener('click', function(e) {
  var colorIndex = parseInt(Math.random() * colors.length);
  text.style.color = colors[colorIndex];
  text.innerText = colors[colorIndex];
})
<body id="body-background">
  <div>
    <h1 id="dynamic-text">Dynamic Text</h1>
  </div>
  <div>
    <button class="button">CLICK ME!</button>
  </div>
0 голосов
/ 10 апреля 2020

Вот способ, которым вы можете случайным образом создать шестнадцатеричный цвет и назначить id с document.getElementById: 

function hexCode() {
    // storing all letter and digit combinations 
    // for html color code 
    var letters = "0123456789ABCDEF"; 
  
    // html color code starts with # 
    var color = '#'; 
  
    // generating 6 times as HTML color code consist 
    // of 6 letter or digits 
    for (var i = 0; i < 6; i++) 
       color += letters[(Math.floor(Math.random() * 16))]; 
       
       
    document.getElementById("hex-codes").innerHTML = color;
    document.getElementById("hex-codes").style.color = color;
}

const button = document.querySelector('.button');
const body = document.querySelector('#body-background');
var colors = ['red', 'blue', 'green', 'yellow', 'white'];

button.addEventListener('click', function(e) {
  var colorIndex = parseInt(Math.random() * colors.length);
  body.style.backgroundColor = colors[colorIndex];
})
<body id="body-background">
  <div>
    <h1 id="hex-codes">#000000</h1>
    <h2 id="hexcode"></h2>
  </div>
  <div>
    <button class="button">Change Background Color!</button>
  </div>
  <div>
    <button class="button" onclick="hexCode()">Change Text Color!</button>
  </div>
  
  
</body>

Надеюсь, вы себе это так представляли!

0 голосов
/ 10 апреля 2020

?? это это? 

const myButton   = document.querySelector('#my-color-button')
  ,   h1Elm      = document.querySelector('#hex-codes')
  ,   colorsList = ['red', 'blue', 'green', 'yellow', 'white']
  ;
myButton.onclick=()=>
  {
  let colorIndex =  Math.floor(Math.random() * colorsList.length)
  document.body.style.background = h1Elm.textContent =  colorsList[colorIndex];
  }
<body>
  <div>
    <h1 id="hex-codes">#FFC0CB</h1>
  </div>
  <div>
    <button id="my-color-button">CLICK ME!</button>
  </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...