[FIXED] How to get a line break for text pulled randomly from a javascript array const

Issue

I'm creating a simple webpage tool for language education that randomly selects a question from a javascript array const, but the longer questions are cut off, especially for mobile. How can I get a line break for these longer text questions? I've tried adding breaks inside the array, and I've tried adding css line breaks for the input and divs, but nothing works.

    <style>
    .button {
      background-color: #094997;
      border-radius: 12px;
      border: none;
      color: white;
      padding: 12px 20px;
      text-align: center;
      text-decoration: none;
      font-size: 24px;
      width: 200px;
    }
    input
    {
        font-size:22px;
        padding: 50px 50px;
        text-align: center;
        width: 200px;
        height: 250px;
    }
    .questionsdiv {
        text-align: center; 
    }

    </style>


    <div class="questionsdiv">
    <input type="text" "randomquestion"="" id="randomquestion">
    <br><br>
      <button class="button" onclick="findquestion();" type="randomquestion">Random Question</button>
    </div>


    <script>

    const question = ["How old are you?","Where do you go on Saturdays?","Do you have any brothers or sisters?","How many books do you own?","Who is your favorite music artist lately?","Do you like Jazz music?","Have you ever traveled outside of Japan?","Do you want to live in the countryside or in the city when you are older and have a family?",];

    function findquestion() {
      let randomIndex = Math.floor(Math.random() * question.length);
      document.getElementById("randomquestion").setAttribute("value", question[randomIndex]);
    }

    </script>

Solution

In this code, the input tag is used to display the text, and the input tag in html does not support multi-line texts. You have to replace input with textarea And use innerHTML instead of setAttribute

  <style>
    .button {
      background-color: #094997;
      border-radius: 12px;
      border: none;
      color: white;
      padding: 12px 20px;
      text-align: center;
      text-decoration: none;
      font-size: 24px;
      width: 200px;
    }
    textarea
    {
        font-family:arial;
        font-size:22px;
        padding: 50px 50px;
        text-align: center;
        width: 200px;
        height: 250px;
    }
    .questionsdiv {
        text-align: center; 
    }

    </style>


    <div class="questionsdiv">
    <textarea type="text" randomquestion="" id="randomquestion"></textarea>
    <br><br>
      <button class="button" onclick="findquestion();" type="randomquestion">Random Question</button>
    </div>


    <script>

    const question = ["How old are you?","Where do you go on Saturdays?","Do you have any brothers or sisters?","How many books do you own?","Who is your favorite music artist lately?","Do you like Jazz music?","Have you ever traveled outside of Japan?","Do you want to live in the countryside or in the city when you are older and have a family?",];

    function findquestion() {
      let randomIndex = Math.floor(Math.random() * question.length);
      document.getElementById("randomquestion").innerHTML  = question[randomIndex];
    }

    </script>

NOTE: textarea by default use monospace font-family property you can replace it with any font you want

Answered By - dante velli

Answer Checked By - Pedro (PHPFixing Volunteer)