JavaScript - Loop Function

Question

I have this code which uses a typewriter animation to replace the placeholder text in a search bar: https://codepen.io/anon/pen/vQmRjM

////////////////////////////
// Twitter: @mikedevelops
////////////////////////////

// your custome placeholder goes here!
var typetext = ["Text 1", "Text 2", "Text 3"];  
var typetext = typetext[Math.floor(Math.random() * typetext.length)];   
var searchBar = $('#search');
    // placeholder loop counter
var phCount = 0;

// function to return random number between
// with min/max range
function randDelay(min, max) {
    return Math.floor(Math.random() * (max-min+1)+min);
}

// function to print placeholder text in a 
// 'typing' effect
function printLetter(string, el) {
    // split string into character separated array
    var arr = string.split(''),
        input = el,
        // store full placeholder
        origString = string,
        // get current placeholder value
        curPlace = $(input).attr("placeholder"),
        // append next letter to current placeholder
        placeholder = curPlace + arr[phCount];

    setTimeout(function(){
        // print placeholder text
        $(input).attr("placeholder", placeholder);
        // increase loop count
        phCount++;
        // run loop until placeholder is fully printed
        if (phCount < arr.length) {
            printLetter(origString, input);
        }
    // use random speed to simulate
    // 'human' typing
    }, randDelay(50, 90));
}  

// function to init animation
function placeholder() {    
    $(searchBar).attr("placeholder", "");
    printLetter(typetext, searchBar);
}

window.setInterval(function(){
    placeholder();
    }, 3000);

I added a setInterval to loop through the different placeholder text every few seconds, however after the first iteration it just starts showing undefined.

Any ideas where I have went wrong?

Well, your overwriting the array, the very next line, with just a string, from one of the values from the array. — Anuga
– Anuga, Commented Nov 15, 2018 at 11:18
I thing $('#search').attr("placeholder", ""); may solve .But your code is like correct — LDS
– LDS, Commented Nov 15, 2018 at 11:40

Mamun · Accepted Answer · 2018-11-15 11:57:38Z

The issue is you are trying to access the array item from an index which does not really exist. You have to reset the variable phCount in each call of setInterval():

window.setInterval(function(){
  phCount = 0; // reset here
  placeholder();
}, 3000);

Code Example:

////////////////////////////
// Twitter: @mikedevelops
////////////////////////////

// your custome placeholder goes here!
var typetext = ["Text 1", "Text 2", "Text 3"];	
var typetext = typetext[Math.floor(Math.random() * typetext.length)];	
var searchBar = $('#search');
	// placeholder loop counter
var phCount = 0;

// function to return random number between
// with min/max range
function randDelay(min, max) {
  return Math.floor(Math.random() * (max-min+1)+min);
}

// function to print placeholder text in a 
// 'typing' effect
function printLetter(string, el) {
  // split string into character seperated array

  var arr = string.split(''),
  input = el,
  // store full placeholder
  origString = string,
  // get current placeholder value
  curPlace = $(input).attr("placeholder"),
  // append next letter to current placeholder
  placeholder = curPlace + arr[phCount];
  //console.log(curPlace + '::' + arr[phCount] + '::' + phCount)

  setTimeout(function(){
  // print placeholder text
  $(input).attr("placeholder", placeholder);
  // increase loop count
  phCount++;

  // run loop until placeholder is fully printed
  if (phCount < arr.length) {
    printLetter(origString, input);
  }
  // use random speed to simulate
  // 'human' typing
  }, randDelay(50, 90));
}  

// function to init animation
function placeholder() {	
  $(searchBar).attr("placeholder", "");
  printLetter(typetext, searchBar);
}

window.setInterval(function(){
  phCount = 0;
  placeholder();
}, 3000);

@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);

html {
  background: linear-gradient(90deg, #00c6ff 10%, #0072ff 90%);  
  font-family: 'PT Sans', Helvetica, Arial, sans-serif;
  padding-top: 50px;
}

h1 {
  text-shadow: 1px 1px 10px rgba(black, .5);
}

h1, h2 {
  text-align: center;
  color: white;
  font-size: 2.5em;
  line-height: 1.3em;
  font-weight: 300;
}

h2 {
  margin-top: 100px;
  font-size: 1.3em;
  font-style: italic;
  font-weight: 100;
}

.body {
  width: 100%;
  height: 250px;
  box-sizing: border-box;
}

input {
  box-sizing: border-box;
  font-size: 13px;
  vertical-align: top;
}

.wrapper {
  text-align: center;
  position: relative;
  height: 80px;
  font-size: 0;
  top: 50%;
  transform: translateY(-50%);
}

.search {
  padding: 0 30px;
  font-size: 18px;
  width: 60%;
  max-width: 400px;
  height: 80px;
  border: 1px solid darken(white, 30%);
  border-radius: 20px 0 0 20px;
}

.submit {
  cursor: pointer;
  border: none;
  background: url('http://thesuiteworld.com/wp-admin/maint/search-icon-white-png-540.png') no-repeat center center, #1E1E20;
  background-size: 35px 35px;
  border-radius: 0 20px 20px 0;
  padding: 15px 25px;
  display: inline-block;
  width: 150px;
  height: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
  <h1>Placeholder text with<br/> typing effect</h1>
  <div class="wrapper">
    <input class="search" type="text" id="search" />
    <input class="submit" type="submit" value=" " />
  </div>
</div>
<h2>Click search to reset</h2>

Megha Patel · Accepted Answer · 2018-11-15 11:51:40Z

0

to remove undefined, You need to reset the char length loop setting

update following code to reset the string length to 0

if (phCount  arr.length) {
	    printLetter(origString, input);
    }
	else {
		phCount = 0;
	}

and to display next string use following code

var wordcount =0;
window.setInterval(function(){
	
    if (wordcount >= typetext.length) {
        wordcount = 0;
	}
	
	placeholder(wordcount);
	wordcount++;
}, 3000);

This will loop the array of string. This should work.

answered Nov 15, 2018 at 11:51

Megha Patel

764 bronze badges

Comments

Nisarg · Accepted Answer · 2018-11-15 14:22:43Z

0

I think you have to reset the phCount to 0 when you reset the placeholder ($(searchBar).attr("placeholder", "")).

edited Nov 15, 2018 at 14:22

Nisarg

1,6497 gold badges20 silver badges31 bronze badges

answered Nov 15, 2018 at 13:53

vidvin

1

Collectives™ on Stack Overflow

JavaScript - Loop Function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related