Question 175646 in Html Question posted in
Some basic documentation can be found here.

Can HTML, JS, and CSS be used to make text change for three different things?

I need some text to change (with a 1 second interval) on my website. (https://website.elliott23.repl.co). I can’t figure out how to make it routinely change with an interval of 1 second. This is my javascript for it.

var $text = $("#text");
var numbers = ["First", "Second", "Third", "Fourth", "Fifth", "Sixth", "Seventh", "Eighth", "Ninth", "Tenth"];

for (var i = 1; i <= 10; ++i) {
  (function(index) {
    setTimeout(function() { 
      $text.html(numbers[index-1] + " sentence");
    }, i * 1000);
  })(i);
}

This is my HTML

<div id="text"></div>

The text isn’t changing. This is the html all around the element that needs to change.

<div class="opening">
    <h1>Hey, I'm<span class="green-text"> Elliott D'Orazio</span><br></h1>
      <h1>I design and develop<span class="italic"></span><div id="text"></div></h1>
</div>

I tried already checking on stack overflow. None of the articles helped me do what I needed to do. The code I provided above is from another stack post. I have no clue how to do this as my JavaScript knowledge is less than my HTML and CSS.

Tags:

3

Answers


  1. 0

    If you need to do this periodically you can use setInterval instead of setTimeout and for loop.

    Something like this:

    var element = document.getElementById("text");
var numbers = ["First", "Second", "Third", "Fourth", "Fifth", "Sixth", "Seventh", "Eighth", "Ninth", "Tenth"];

let current_word = 0;
let interval_id = setInterval(your_function, 1000);
function your_function() {
  if( current_word >= ( numbers.length - 1 ) ) {
      // clear interval when you reach end of the list.
      clearInterval( interval_id ) 
      // or you can set it to begining: current_word = 0 if you want to make infinite loop
  } else {
      element.innerHTML( number[ current_word ] )
      current_word++
  }
}

    In addition I recommend to change ID from text, to something more unique.

    Login or Signup to reply.
  2. 0

    Make sure you add JQuery to your page and then you can change your code to this:

    var $text = $("#text");
var numbers = ["First", "Second", "Third", "Fourth", "Fifth", "Sixth", "Seventh", "Eighth", "Ninth", "Tenth"];
var currentIndex = 0;

function changeText() {
  $text.html(numbers[currentIndex] + " sentence ");
  currentIndex = (currentIndex + 1) % numbers.length;
}

setInterval(changeText, 1000);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="opening">
  <h1>Hey, I'm<span class="green-text"> Elliott D'Orazio</span><br></h1>
  <h1>I design and develop <span class="italic" id="text"></span></h1>
</div>
    Login or Signup to reply.
  3. 0

    Make sure to load jQuery because it is not vanilla JS. Simply add the library’s script, e.g. from a CDN:

    var $text = $("#text");
var numbers = ["First", "Second", "Third", "Fourth", "Fifth", "Sixth", "Seventh", "Eighth", "Ninth", "Tenth"];

for (var i = 1; i <= 10; ++i) {
  (function(index) {
    setTimeout(function() { 
      $text.html(numbers[index-1] + " sentence");
    }, i * 1000);
  })(i);
}
    <script
  src="https://code.jquery.com/jquery-3.7.0.min.js"
  integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
  crossorigin="anonymous"></script>

<div class="opening">
    <h1>Hey, I'm<span class="green-text"> Elliott D'Orazio</span><br></h1>
      <h1>I design and develop<span class="italic"></span><div id="text"></div></h1>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search