Question

0

197

Views

Change color of letters every second from user textbox input

I have to write a page where user types some text into a textbox. User clicks the enter button, after this, the text written into the textbox is shown under the textbox. Every letter from the text under textbox should change its color every one second.

I don't know how can I refer to this jQuery function $(function() {} ) because console gives me error that I have to specify the name of the function. I'm just a beginner at programming and I would be very grateful for any kind of help.

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>

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T18:20:40.635Z

The main issue in your code is because you've not defined the function() you invoke from the onclick attribute anywhere. However it should be noted that using onX attributes in HTML to invoke JS functions is outdated and no longer good practice.

The better approach is to use unobtrusive event handlers bound through JS, either using the native addEventListener() method or jQuery's on() method, as you've included that library.

From there you can define your logic to set the text of the #arch element based on the input value, and then create a separate function, called in setInterval() every 1 second, to loop through the span elements and change their colour randomly. Try this:

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>

Answer 2 · 2022-07-04T18:20:40.643Z

I have resolved the error you can check this code

<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>```

Answer 3 · 2022-07-04T18:20:40.650Z

There are a few issues with your code.

function is preserved keyword, name your function something else
You're getting the contets of arch before there's something in it. I now fill text using the input field
The for should be inside the setInterval
Clearing arch should be inside the 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

197

Change color of letters every second from user textbox input

3 answers

0

0

0

Find remote jobs

Andres GPT