Меняйте цвет букв каждую секунду из пользовательского текстового поля

Question

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

Я не знаю, как я могу сослаться на эту функцию jQuery $(function() {} ), потому что консоль выдает мне ошибку, что я должен указать имя функции. Я только новичок в программировании, и я был бы очень благодарен за любую помощь.

var colours = ["#000000", "#FF0000", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"], 
        idx;    

    $(function() {
        var div = $('#arch'); 
        var chars = div.text().split('');
        var text = document.getElementById('text').value;
        document.getElementById('arch').innerHTML = text;
        div.html('');     
        for(var i = 0; i < chars.length; i++) {
            idx = Math.floor(Math.random() * colours.length);
            var span = $('<span>' + chars[i] + '</span>').css("color", colours[idx]);
            div.append(span);
            chars.setInterval(colours, 1000); // change colors of letters every second
        }

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="text" id="text">
    <button onclick="function()">ENTER</button>
    <br /><br />
    <div id="arch"></div>

javascript html jquery

0

Oliwier Piasecki 21 Янв 2022 в 15:44

Answer 1

Основная проблема в вашем коде заключается в том, что вы нигде не определили function(), который вы вызываете из атрибута onclick. Однако следует отметить, что использование атрибутов onX в HTML для вызова функций JS устарело и больше не является хорошей практикой.

Лучшим подходом является использование ненавязчивых обработчиков событий, связанных через JS, либо с использованием собственного метода addEventListener(), либо метода jQuery on(), поскольку вы включили эту библиотеку.

Оттуда вы можете определить свою логику для установки текста элемента #arch на основе входного значения, а затем создать отдельную функцию, вызываемую в setInterval() каждую 1 секунду, для перебора span} элементов и случайным образом меняют свой цвет. Попробуй это:

let colours = ["#000000", "#FF0000", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"];

jQuery($ => {
  $('button').on('click', () => {
    let text = $('#text').val();
    let $arch = $('#arch').html('');

    $arch.append(text.split('').map(char => `<span>${char}</span>`));
    updateColours(); // set random colours now
    setInterval(updateColours, 1000); // update colours every second
  });
  
  let updateColours = () => {
    $('#arch span').each((i, el) => {
      let idx = Math.floor(Math.random() * colours.length);
      $(el).css("color", colours[idx])
    });
  }
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<input type="text" name="text" id="text" value="Lorem ipsum dolor sit amet consectetur adipiscing elit" />
<button>ENTER</button>
<br /><br />
<div id="arch"></div>

0

Rory McCrossan 21 Янв 2022 в 15:56

Answer 2

Я устранил ошибку, вы можете проверить этот код

<html>

<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>

    <input type="text" name="text" id="text">
    <button>ENTER</button>
    <br /><br />
    <div id="arch"></div>

    <script>

        var colours = ["#000000", "#FF0000", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"],
            idx;

        $(function () {

            $("button").click(function () {
                console.log("button clicked");
                var text = document.getElementById('text').value;
                document.getElementById('arch').innerHTML = text;
                var div = $('#arch');
                var chars = div.text().split('');


                setInterval(
                    function () {
                        div.html('');
                        for (var i = 0; i < chars.length; i++) {
                            idx = Math.floor(Math.random() * colours.length);
                            var span = $('<span>' + chars[i] + '</span>').css("color", colours[idx]);
                            div.append(span);

                        }
                    }, 1000); // change colors of letters every second

            });
        });
    </script>
</body>

</html>```

0

Mahesh Tavethiya 21 Янв 2022 в 15:59

Answer 3

В вашем коде есть несколько проблем.

function является сохраненным ключевым словом, назовите вашу функцию как-нибудь иначе
Вы получаете содержание arch до того, как в нем что-то есть. Теперь я заполняю text, используя поле ввода
for должен быть внутри setInterval
Очистка arch должна быть внутри setInterval

var colours = ["#000000", "#FF0000", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"];
var idx;    

function showLetters() {
    var ele = $('#arch'); 
    var chars = document.getElementById('text').value.split('');
    
    setInterval(function() {
      ele.empty();
      for(var i = 0; i < chars.length; i++) {
          idx = Math.floor(Math.random() * colours.length);
          var span = $('<span>' + chars[i] + '</span>').css("color", colours[idx]);
          ele.append(span);
      }
    }, 1000);   
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="text" id="text">
<button onclick="showLetters()">ENTER</button>
<br /><br />
<div id="arch"></div>

0

0stone0 21 Янв 2022 в 16:00

Answer 4

В вашем коде есть некоторые проблемы, уже упомянутые в других ответах.

Как правило, не рекомендуется использовать встроенный обработчики событий. Вот фрагмент с использованием делегирования событий и без jQuery.

document.addEventListener(`click`, handle);
let to = 0;

function colorize(value) {
  const colours = ["#000000", "#FF0000", "#990066", 
    "#FF9966", "#996666", "#00FF00", "#CC9933"];
  
  if (value) {
    clearTimeout(to);
    // create spans with random color from the input value
    const colorized = [...value].map(val =>
      `<span style="color:${
        colours[Math.floor(Math.random() * colours.length)]}">${val}</span>`);
    // fill div#result with the spans
    document.querySelector(`#result`).innerHTML = colorized.join(``);
    // (re)set the timeout. [to] is necessary to be able to 
    // cancel the timeout
    to = setTimeout(() => colorize(value), 1000);
  } else {
    // no value: nothing done
    return false;
  }
}

function handle(evt) {
  if (evt.target.id === `colorize`) {
    const value = document.querySelector(`#text`).value.trim();
    if (value) {
      // empty the text field
      document.querySelector(`#text`).value = ``;
      // start coloring
      return colorize(value);
    }
  }
  
  return true;
}

<input type="text" name="text" id="text" 
  value="TEST ME NOW", placeholder="enter some text">
<button id="colorize">ENTER</button>
<div id="result"></div>

0

KooiInc 21 Янв 2022 в 16:25

Answer 5

Во-первых, я отделил функцию randomize, потому что она нужна и на setInterval, и отдельно. setInterval выполняет изменение каждую секунду, но ждет секунду, прежде чем сделать это в первый раз. Так как мы хотим, чтобы слово показывалось мгновенно, мы также вызываем его отдельно. Во-вторых, когда вы вызываете функцию, в большинстве случаев вам нужно называть ее по имени (для простоты я не буду здесь описывать исключения из этого правила), а function является зарезервированным словом. В-третьих, определенное вами событие загрузки jQuery выполняется, когда запускается событие load, вместо этого вам нужно событие click. В-четвертых, переменные не являются функциями. Возможно, я исправил и другие проблемы в вашем коде, которые я уже не помню. Не стесняйтесь задавать любые вопросы.

var colours = ["#000000", "#FF0000", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"], 
        idx;    

    function randomize(div, chars) {
        div.html('');     
        for(var i = 0; i < chars.length; i++) {
            idx = Math.floor(Math.random() * colours.length);
             var span = $('<span>' + chars[i] + '</span>').css("color", colours[idx]);
             div.append(span);
        }
    }
    function doIt() {
        var div = $('#arch'); 
        var text = document.getElementById('text').value;
        var chars = text.split('');
        randomize(div, chars);
        setInterval(function() {
            randomize(div, chars);
        }, 1000); // change colors of letters every second

    };

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="text" id="text">
    <button onclick="doIt()">ENTER</button>
    <br /><br />
    <div id="arch"></div>

0

Lajos Arpad 21 Янв 2022 в 16:38

Answer 6

Несколько точек могут быть изменены, чтобы иметь рабочую функцию:

ваша функция должна быть именем с истинным именем (в моем примере loadChangeColor)
изменение цвета символа должно быть вызовом функции в интервале
вам не нужно очищать html от #arch каждую секунду, просто измените цвет CSS

    
 
   var colours = ['#000000', '#FF0000', '#990066', '#FF9966', '#996666', '#00FF00', '#CC9933' ], idx;           
   

     function changeEachCharColor() {
       $('#arch span').each((i, char) => {
          idx = Math.floor(Math.random() * colours.length);
          $(char).css("color", colours[idx]);
       })
    }

    function loadChangeColours(delay) {
        $('#arch').html(
           $('#text').val().split('').map(char => `<span>${char}</span>`)
        );
        
        setInterval(changeEachCharColor, delay);
    }

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <input type="text" name="text" id="text">
    <button onclick="loadChangeColours(1000)">ENTER</button>
    <br /><br />
    <div id="arch"></div>

0

jeremy-denis 21 Янв 2022 в 16:42

Меняйте цвет букв каждую секунду из пользовательского текстового поля

6 ответов

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript