How do I write a javascript with a for loop that repeats a word?

Question

I'm self taught in javascript but I have been struggling to do this, I want to create a js where it has two functions, one works just for the "for loop". And the second one goes for the buttom which only will ask the user two questions with two prompts, one word, and how many times does the user would like to repeat it.

for example, if the user writes "Hello" in the first prompt and then writes "3" in the second prompt question, the outpur needs to be "HelloHelloHello"

I would really appreciate your help, this is my html

<!DOCTYPE html>

<html>

<head>

<script src="practice1.js"></script>

<title>Repetition</title>

</head>

<body>

<h1> repetition of words </h1>

<p id="resultLoop"> ----- </p>

<button onclick="askUser()">Do the repetitions</button>

</body>

</html>

Phoenix · Accepted Answer · 2021-02-11T02:24:46.950

If you need to use a for loop, then there are a few ways to do this. One way would be to create an array and push the string they input an n number of times. Then join them together. Example:

let result = [];
const n = 3;
const stringToRepeat = "hello";
for (let i = 0; i < n; i++) {
    result.push(stringToRepeat);
}
result = result.join("");
console.log(result);

Output:

hellohellohello

Another way would be to simply concatenate the strings within each iteration of your for loop. Example:

let result = "";
const n = 3;
const stringToRepeat = "hello";
for (let i = 0; i < n; i++) {
    result += stringToRepeat;
}
console.log(result);

Output:

hellohellohello

Although String.prototype.concat() also concatenates strings, they recommend using assignment operators for performance reasons.

If you didn't need to use a for loop, then String.prototype.repeat() does exactly what you want. Although, it is still not compatible with Internet Explorer.

@StackSlave OP is asking how to implement the functionality in a for loop. If they wanted to know how to do it in general, then it would just be a [duplicate question](https://stackoverflow.com/questions/202605/repeat-string-javascript). Moreover, I'm simply stating that it's not compatible with IE. OP can do what they want with that info. — Phoenix, Feb 11 '21 at 03:21

StackSlave · Answer 2 · 2021-02-11T03:38:31.503

Here's an example of what I mean:

//<![CDATA[
/* js/external.js */
let doc, htm, bod, nav, M, I, mobile, S, Q, hC, aC, rC, tC, allGood; // for reuse on other loads
addEventListener('load', ()=>{
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
  let w = within || doc;
  return w.querySelector(selector);
}
Q = (selector, within)=>{
  let w = within || doc;
  return w.querySelectorAll(selector);
}
hC = (node, className)=>{
  return node.classList.contains(className);
}
aC = function(){
  const a = [...arguments];
  a.shift().classList.add(...a);
  return aC;
}
rC = function(){
  const a = [...arguments];
  a.shift().classList.remove(...a);
  return rC;
}
tC = function(){
  const a = [...arguments];
  a.shift().classList.toggle(...a);
  return tC;
}
allGood = nodeArray=>{
  for(let n of nodeArray){
    if(!hC(n, 'good')){
      return false;
    }
  }
  return true;
}
// small library above - magic below can be put on another page using a load Event (except // end load line)
const rep_text = I('rep_text'), rep_x = I('rep_x'), rep_it = I('rep_it'), out = I('output'), goods = [rep_text, rep_x];
rep_text.oninput = function(){
  let f = this.value.trim() === '' ? rC : aC; // remove or add class
  f(this, 'good');
}
rep_x.oninput = function(){
  let f = this.value.match(/^[1-9][0-9]*$/) ? aC : rC;
  f(this, 'good');
}
rep_it.onclick = ()=>{
  out.textContent = allGood(goods) ? rep_text.value.repeat(+rep_x.value) : '';
  // out.scrollIntoView(); // use this but it's a Stack Overflow issue
}
}); // end load
//]]>

/* css/external.css */
*{
  box-sizing:border-box; color:#fff; padding:0; margin:0; outline:none; -moz-user-select:none; -ms-user-select:none; -webkit-user-select:none; user-select:none; overflow:hidden;
}
html,body,.main{
  width:100%; height:100%;
}
.main{
  background:#333; padding:5px; overflow:auto;
}
.main *{
  font:bold 22px Tahoma, Geneva, sans-serif; 
}
label>span{
  cursor:pointer; display:inline-block; height:27px; text-shadow:-1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000; float:left;
}
input[type=text],input[type=number]{
  width:100%; height:38px; background:#fff; color:#000; border-radius:3px; border:1px solid #c00; padding:5px; margin:3px 0; box-shadow:none; -moz-user-select:text; -ms-user-select:text; -webkit-user-select:text; user-select:text;
}
input[type=button],button{
  cursor:pointer; width:100%; background:linear-gradient(#1b7bbb,#147); color:#fff; font:bold 28px Tahoma, Geneva, sans-serif; padding:5px; border:1px solid #007; border-radius:10px; margin-top:7px;
}
input.good{
  border-color:#0c0;
}
#output{
  color:#aaf; margin:5px 10px; text-overflow:ellipsis; 
}

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Title Here</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div class='main'>
    <label><span>Text to Repeat</span><input id='rep_text' type='text' value='' /></label>
    <label><span>Times to Repeat</span><input class='good' id='rep_x' type='number' value='1' min='1' /></label>
    <input id='rep_it' type='button' value='REPEAT' />  
    <div id='output'></div>
  </div>
</body>
</html>

How do I write a javascript with a for loop that repeats a word?

2 Answers2