Search code examples
javascripthtmlcsslogic

Line-breaks in between of text using JS ,(Dynamically)


I am stuck on a very beginner problem in JS, what I'm trying to do is add line-breaks in between text which the script adds dynamically after generating a random string, but I could not find a source that would match my case

The code that picks a random string

var textArray = [
    'Gateway to wild imaginations!',
    'Activating the send portal :D',
    'Empowering nothing ;P'
];
var randomNumber = Math.floor(Math.random()*textArray.length);
var rndStr = textArray[randomNumber];

const h_1_elem = document.getElementById('main-h1');
h_1_elem.innerText = rndStr;

I would consider myself a beginner in programming so take this question with a pinch of salt


Solution

  • You could use \n to insert a new line since you are using

    h_1_elem.innerText = rndStr + "\n";
    

    Also I created a function called randomNumber in order to call it more than one time.

    var textArray = [
        'Gateway to wild imaginations!',
        'Activating the send portal :D',
        'Empowering nothing ;P'
    ];
    
    const h_1_elem = document.getElementById('main-h1');
    h_1_elem.innerText = textArray[randomNumber()] + "\n";
    h_1_elem.innerText += textArray[randomNumber()] + "\n";
    
    function randomNumber() {
      let number = Math.floor(Math.random()*textArray.length);
      return number;
    }
    <div id="main-h1"></div>

    If you run the code multiple times, you will get different messages. Just keep adding more :)

    Regards

    ============ EDITED ============

    Oh, you want a break line after each word. Didn't understand the question that way. So, for that you should use something like this:

    var textArray = [
        'Gateway to wild imaginations!',
        'Activating the send portal :D',
        'Empowering nothing ;P'
    ];
    
    const h_1_elem = document.getElementById('main-h1');
    h_1_elem.innerText = textArray[randomNumber()].replaceAll(" ","\n");
    
    function randomNumber() {
      let number = Math.floor(Math.random()*textArray.length);
      return number;
    }
    <div id="main-h1"></div>

    I just used

    replaceAll(" ", "\n")
    

    In order to replace every space by a break line. Hope this is what you want.

    Regards