Repeat words inside a loop

Question

I am new to programming using JavaScript. How do I repeat a string value retrieved from an <input type="text"> element value, repeat the string by the number retrieved from a sibling <input> element, then set the .innerHTML of a <div> element to the resulting repeated string using JavaScript? I have tried the below approach, which did not return expected result. What am I doing wrong at my current attempt? Is there a simpler way to achieve the expected result?

 function repeatWord(str, num) {
        num = Number(num);

        var result = '';
        while (true) {
            if (num & 1) { // (1)
                result += str;
            }
            num >>>= 1; // (2)
            if (num <= 0) break;
            str += str;
        }

        return result;
    }

</script>

<html>
<head>
<title></title>

 

<style type="text/css">

body {
 background-color: #D3D3D3;
 font-family: arial;
 text-align: right;
 color: #008B8B;
}

#contentwrap {
 border: 8px #800000 solid;
 padding: 20px;
 width: 600px;
 border-radius: 25px;
 text-align: right;
 background: white;
 margin: 40px auto 0px auto; 
}
#formwrap {

 text-align: center;
 margin: 0px 0px 60px 0px;
 min-height: 300px;
}

#title {
 font-size: 2.2em;
 border-bottom: 7px #008B8B double;
 padding: 10px 0px 10px 0px;
 color: #008B8B;
 text-align: center;
}

#formtext {
 text-align: center;
 margin-top: 5px;
}

.formfield {

 text-align: center;
 margin: 5px 20px 10px 20px;
}

#button {
 border-radius: 20px;

}

#results {
 font-size: 1em;
}

</style>

</head>
<body>

<div id="contentwrap">

 <div id="title">Fun with Loops</div> <br />
 
 <div id="formwrap">
  <form>
 
   <div id="formtext">Enter any word</div>
   <input type="text" id="word" class="formfield" size="20" /> <br />
   
   <div id="formtext">Enter number of times to repeat word</div>
   <input type="text" id="repeatnum" class="formfield" size="20" /> <br />
 
   <input type="button" value="Show Output" id="button" onClick="repeatWord()" />

  </form>
 
  <div id="results"></div>
 </div>
</div>
</body>
</html>

<html>
<head>
<title></title>

<script type="text/javascript">

 function repeatWord(str, num) {
        num = Number(num);

        var result = '';
        while (true) {
            if (num & 1) { // (1)
                result += str;
            }
            num >>>= 1; // (2)
            if (num <= 0) break;
            str += str;
        }

        return result;
    }

</script>

<style type="text/css">

body {
 background-color: #D3D3D3;
 font-family: arial;
 text-align: right;
 color: #008B8B;
}

#contentwrap {
 border: 8px #800000 solid;
 padding: 20px;
 width: 600px;
 border-radius: 25px;
 text-align: right;
 background: white;
 margin: 40px auto 0px auto; 
}
#formwrap {

 text-align: center;
 margin: 0px 0px 60px 0px;
 min-height: 300px;
}

#title {
 font-size: 2.2em;
 border-bottom: 7px #008B8B double;
 padding: 10px 0px 10px 0px;
 color: #008B8B;
 text-align: center;
}

#formtext {
 text-align: center;
 margin-top: 5px;
}

.formfield {

 text-align: center;
 margin: 5px 20px 10px 20px;
}

#button {
 border-radius: 20px;

}

#results {
 font-size: 1em;
}

</style>

</head>
<body>

<div id="contentwrap">

 <div id="title">Fun with Loops</div> <br />
 
 <div id="formwrap">
  <form>
 
   <div id="formtext">Enter any word</div>
   <input type="text" id="word" class="formfield" size="20" /> <br />
   
   <div id="formtext">Enter number of times to repeat word</div>
   <input type="text" id="repeatnum" class="formfield" size="20" /> <br />
 
   <input type="button" value="Show Output" id="button" onClick="repeatWord()" />

  </form>
 
  <div id="results"></div>
 </div>
</div>
</body>
</html>

Welcome to Stackoverflow! Please read http://stackoverflow.com/help/how-to-ask before asking any further questions. Thank you and have a good time! — connexo, Oct 27 '16 at 23:48

score 1 · Answer 1 · edited May 23 '17 at 12:33

The function repeatWord returns expected result.

The issue is that you do not pass any parameters to the function, the return value from the function is not further processed. The DOM elements are not referenced within repeatWord function call. No element has .textContent or .innerHTML set using return value of repeatWord.

Note, you can use console.log() to check a value within a function call, or the return value of a function. For example, console.log(result). See also What is the scope of variables in JavaScript?.

You can substitute input type="number" forinput type="text"as#repeatnumelement, withminattribute set to0,maxattribute set to10`, or other positive number value, as a positive number would appear to be expected value of the element.

Define variables to reference elements having ids word, repeatnum, results to reference the elements within repeatWord function call.

Get the .values from #word and #repeatnum elements; set str as #word .value, set num with #repeatnum .valueAsNumber passed to Number constructor.

At completion of while loop, set #results .textContent to result.

<div id="contentwrap">

  <div id="title">Fun with Loops</div>
  <br />

  <div id="formwrap">
    <form>

      <div id="formtext">Enter any word</div>
      <input type="text" id="word" class="formfield" size="20" />
      <br />

      <div id="formtext">Enter number of times to repeat word</div>
      <input type="number" min="0" max="10" id="repeatnum" class="formfield" size="20" />
      <br />

      <input type="button" value="Show Output" id="button" onClick="repeatWord()" />

    </form>
    <br>
    <div id="results"></div>
  </div>
</div>
<script>
  var word = document.getElementById("word"); 
  var number = document.getElementById("repeatnum");
  var results = document.getElementById("results");

  function repeatWord() {
    // set `num` to `number` `.valueAsNumber`
    num = number.valueAsNumber;  
    str = word.value; // set `str` to `word` `.value`
    var result = "";
    while (true) {
      if (num & 1) { // (1)
        result += str;
      }
      num >>>= 1; // (2)
      if (num <= 0) break;
      str += str;
    }
    // set `results` `.textContent` to `result`
    results.textContent = result; 
  }
</script>

@connexo What is the reason the Question should not be answered? — guest271314, Oct 27 '16 at 23:47
There is no actual question in this. Questions should not require analyzing the code to get an idea what might be asked for. — connexo, Oct 27 '16 at 23:49
@connexo _"but can't figure out Loop to repeat words with JS. I'm new at this"_ Was clear here that OP is new to programming using `javascript` and simply seeks to repeat text. OP put forth effort to solve problem. Editing the Question would resolve any issues about what the Question is. Note, not that good at editing Questions here, though will try. — guest271314, Oct 27 '16 at 23:52
It worth mention that `repeat()` is not available in IE and Opera (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat#Browser_compatibility). So a simple workaround may be a `function(string, times) {var result = ''; while(times--) {result += string;} return result;`. — cFreed, Oct 28 '16 at 19:09

Repeat words inside a loop

1 Answers1