CODEWITHSUNDEEP
javascripthtmlstring
Big Weeb
Big Weeb

Reputation: 13

adding multiple breaks inside javascript string

I'm trying to make a program for class where you choose the number of words you want to input, then you input the selected amount of words, and then the computer will list them back to you in opposite order with one word on each line. for instance, if you input cat first, then dog, then fish, then the program will come up like this:

3 . fish

2 . dog

1 . cat

this is what my code looks like - 

<html>
<head>
<title>word reversal</title>
<script language = "JavaScript">
var int = 1;
var y = "";
var num = prompt("How many words do you want?","3");

for(var rep = 0;rep < num;rep++){
    var word = prompt("Enter word number " + int + ".","cat");

    y = int + ". " + word + y;
    y = y += "<br>";
    var z = y;

    int++;

}
</script>
</head>
<body>
<h1>Your words are now reversed.</h1>
<script language = "JavaScript">

document.writeln(z);
</script>

</body>
</html>

it comes out like this:

<h1>Your words are now reversed.</h1>
3. cat2. dog1. fish

im new at this site so im sorry if i did the formatting wrong but i would appreciate if somebody can tell me what i did wrong!

Upvotes: 0

Views: 154

Answers (5)

Brian H.
Brian H.

Reputation: 844

Most answers already address the issue of having missplaced the <br> tag in your string construction, but overall the code has a lot of areas that can be improved on in my opinion, here is what you are doing with a lot less code, and i'd dare to say it's easier to read too:

var numWords = prompt("How many words do you want?","3");
var fullString = "";

for(var currentWordNum = 1; i <= numWords; i++) {
    var newWord = prompt("Enter word number " + currentWordNum + ".","cat");
    fullString = currentWordNum + ". " + newWord + "<br>" + fullString;
}

document.writeln(fullString);

Now the main things to notice are:

  • Variable naming, every variable name should indicate what it's purpose is with as little context as possible, which is why i changed the name for int to numWords, y to fullString, rep to currentWordNum and word to newWord.

  • Iterating over a useful value, in your code you are using 2 different variables for the exact same purpose (int and rep), which is to iterate over the number of words you are prompting, instead you can use a single variable in the for loop (currentWordNum), set it's initial value to a valueable number (in this case 1) and use <= to still have it stop where you want it to.

  • String construction: this is really a matter of taste, but if you build the string as I have done in my code I find it a lot easier to read and understand what is going on, we can clearly see that i am prepending the currentWordNum and the newWord to our existing string, separated with a <br> tag.

I hope this answer is useful to you even if the source of your particular issue has already been solved.

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65796

You were close, but document.writeln() is not for use in this kind of situation. Instead, you can create a new block level element (such as a div) as you create your output and then append that new element into another element that already exists in the document.

Also, it's a lot simpler to store the words in an array and then you can just reverse the order of the array items and loop through the array to pull the values out.

<html>
  <head>
    <title>word reversal</title>
  </head>
  <body>
    <h1>Your words are now reversed.</h1>
    
    <!-- With modern code, you set up a placeholder where new content can be
         dynamically appended. -->
    <div id="outputArea"></div>

    <!-- Place the script at the end of the BODY so that, by the time the browser
         reads the script, all the HTML will have been parsed into memory. -->
    <script>
      var outputArea = document.getElementById("outputArea");
      var words = []; // words will be stored here
      var num = prompt("How many words do you want?","3");

      for(var rep = 0; rep < num; rep++){
        // Place each word into an array
        words.push(prompt("Enter word number " + (rep + 1) + "."));
      }
      
      // Reverse the order of the words in the array and loop through the array
      words.reverse().forEach(function(word, index){
        // Create a new element for the word to be contained in
        var d = document.createElement("div");
        
        // Populate the element
        d.textContent =  (words.length - index) + ") " +  word;
        
        // Append the element to the output area
        outputArea.appendChild(d);
      });
      
    </script>
  </body>
</html>

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68393

Prepend <br> to y instead of appending it

 y = "<br>" + int + ". " + word + y;

Demo

<html>

<head>
  <title>word reversal</title>
  <script language="JavaScript">
    var int = 1;
    var y = "";
    var num = prompt("How many words do you want?", "3");

    for (var rep = 0; rep < num; rep++) {
      var word = prompt("Enter word number " + int + ".", "cat");

      y = "<br>" + int + ". " + word + y;
      var z = y;

      int++;

    }
  </script>
</head>

<body>
  <h1>Your words are now reversed.</h1>
  <script language="JavaScript">
    document.writeln(z);
  </script>

</body>

</html>

Upvotes: 3

Bj&#246;rn Rave
Bj&#246;rn Rave

Reputation: 119

If your only problem is, that you want the output to be on multiple lines you cann add "/n"at the positions where you want a new line space to be

Upvotes: -1

31piy
31piy

Reputation: 23859

The problem with your code is that you're appending <br> after the string which gets suffixed to another string, instead of being prefixed

Also the line

y = y += "<br>";

should be replaced by:

y = "<br>" + y;


<html>

<head>
  <title>word reversal</title>
  <script language="JavaScript">
    var int = 1;
    var y = "";
    var num = prompt("How many words do you want?", "3");

    for (var rep = 0; rep < num; rep++) {
      var word = prompt("Enter word number " + int + ".", "cat");

      y = int + ". " + word + y;
      y = "<br>" + y;
      var z = y;

      int++;

    }
  </script>
</head>

<body>
  <h1>Your words are now reversed.</h1>
  <script language="JavaScript">
    document.writeln(z);
  </script>

</body>

</html>

Upvotes: 0

Related Questions