CODEWITHSUNDEEP
javascript
mediaquery
mediaquery

Reputation: 117

Dynamically Loaded Text in a Textarea, Scroll Down Automatically Using Javascript?

I have a textbox set as a result output for a JavaScript game I am making. However, I would like the textbox to automatically jump down when the text is loaded into the textbox. Is that possible?

HTML

<fieldset class="theResults" id="theResults">
<label>Your past guesses:</label> 
<textarea class="form-control input-lg" id="showResults" name="showResults" rows="1">
</textarea>
</fieldset>

JS

function userGuess() {
  var nGuess = document.getElementById("nGuess").value;
  var theResults = document.getElementById("showResults");

  if (nGuess == numToGuess) {
    theResults.value = theResults.value + "\r" + "Congratulations, that is right! You guessed " + nGuess + ".";
  } else if (nGuess > numToGuess) {
    theResults.value = theResults.value + "\r" + "Try something lower, that is too high! You guessed " + nGuess + ".";
  } else {
    theResults.value = theResults.value + "\r" + "Whoops, that is too low, try again! You guessed " + nGuess + ".";
  }
}

I tried using scrollTop and it overwrote the JS I had for the showResults.

Upvotes: 0

Views: 248

Answers (1)

Syed Ali Taqi
Syed Ali Taqi

Reputation: 4974

You need to give rows and cols to TextArea first of all other wise you'll see only one line of text.

<textarea class="form-control input-lg" id="showResults" name="showResults" rows="5" cols="40">

then you can set your text at bottom using theResults.scrollTop = theResults.scrollHeight;

Complete Code:

function userGuess() {
        var numToGuess = 55; //suppose number to guess is 55
        var nGuess = document.getElementById("nGuess").value;
        var theResults = document.getElementById("showResults");
        if (nGuess == numToGuess) {
            theResults.value = theResults.value + "\r" + "Congratulations, that is right! You guessed " + nGuess + ".";
        } else if (nGuess > numToGuess) {
            theResults.value = theResults.value + "\r" + "Try something lower, that is too high! You guessed " + nGuess + ".";
        } else {
            theResults.value = theResults.value + "\r" + "Whoops, that is too low, try again! You guessed " + nGuess + ".";
        }
        theResults.scrollTop = theResults.scrollHeight; //auto scroll for text
    }

DEMO

Upvotes: 1

Related Questions