How to get a line break for text pulled randomly from a javascript array const-CodePudding

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 >
    <input type="text" "randomquestion"="" id="randomquestion">
    <br><br>
      <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>

CodePudding user response：

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 >
    <textarea type="text" randomquestion="" id="randomquestion"></textarea>
    <br><br>
      <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

CodePudding user response：

Input is an element for single-line user input. For line-breaks the textarea is more suitable. In this case as there is no user input, you can just use a div element and set the innerText.

...
  <div type="text" "randomquestion"="" id="randomquestion"></div>
...

...
  document.getElementById("randomquestion").innerText = question[randomIndex];
...

.button {
  background-color: #094997;
  border-radius: 12px;
  border: none;
  color: white;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 24px;
}
.questionsdiv {
  margin: auto;
  width: 200px;
}

Demo here: https://jsfiddle.net/qkpmr81c/1/