How can I make the text automatically appear in the search bar?

Question

There is an object with keys whose values are text, and this text should appear in the placeholder of the search page on the site. The first key is written one letter at a time until the whole word is created, and then, one letter at a time, it is completely deleted, and the second key is written in the same way in placeholder. The dialing speed does not matter.

I am enclosing my work. Now the problem is that all the keys are written, but they must take turns, deleting the previous one by letter.

 let types={ phrase1:"Words", phrase2:"has been", phrase3:"deleted", }; function writer() { let curr = 0; let text = Object.values(types) let elem = document.getElementsByClassName('topnav'); elem.textContent += text.charAt(curr); curr++ if (curr < text.length ) window.setInterval(writer,60); } writer();

 <div class="topnav"> <input type="text" placeholder=" "> </div>

Answer 1

Solution

• call setTimeout() because it will call the method once whereas setIntervall() will call it repetitive what doesn't make sense here because you will call it in your next function call again.
• use recursion to get the next word of your array

Defined three cases here

1. current letter < wordsArray.length apply method on the same element of the array
2. When 1 is false and value < wordsArray apply method on the next array element writer(value+1)
3. 1 and 2 are false then print out the content of the array as string

 let types = { phrase1: "Words", phrase2: "has been", phrase3: "deleted", }; var curr = 0; function writer(value) { let inp = document.getElementById("text"); let wordArray = Object.values(types) let sentence = wordArray[value]; inp.placeholder = sentence.charAt(curr); curr++; if (curr < sentence.length){ window.setTimeout(function() { writer(value); }, 500); }else if(value < wordArray.length-1){ window.setTimeout(function() { curr = 0; inp.placeholder = " "; writer(value+1); }, 500) }else { inp.placeholder = wordArray.join().replaceAll(",", " "); } } writer(0);

 <div class="topnav"> <input id="text" type="text" placeholder=" "> </div>

Answer 2

I've made a demo, from the very little you could piece together from your question. You really didn't specify anything... BUT I would like to add that the types variable should be an Array and not an Object which makes it much easier to work with. Nonetheless, I did work with your provided code:

 const types = { phrase1:"Words", phrase2:"has been", phrase3:"deleted", } const inputElm = document.querySelector('.topnav > input') function iteratePlaceholder(place = 1) { inputElm.placeholder = types[`phrase${place||1}`]; // call this function again only if "place" is less than the length of keys (3) (place < Object.keys(types).length) && setTimeout(iteratePlaceholder, 500, ++place) } iteratePlaceholder()

 <div class="topnav"> <input type="text" placeholder=" "> </div>