0

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>
1
  • 2
    Why not use a <textarea>? Or better yet, why are your questions even in an input? Just put them in a div or a span or a p.
    – Daedalus
    Nov 2, 2022 at 8:07

2 Answers 2

1

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

2
  • Your welcome, there is a gray check mark on the left side of my answer, please click on it to confirm the answer Nov 2, 2022 at 8:53
  • I had tried the textarea solution without success; I suppose the innerHTML was the key. Nov 2, 2022 at 9:20
0

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.

html

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

js

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

css

.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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.