I am currently trying to design a scrolling command prompt with JS and HTML. Unfortunately I cannot find a way to output text and a JavaScript variable on the same line. I feel like I have tried a million things.

var textarea = $('.term');
var speed = 50; //Writing speed in milliseconds
var text = 'TEST';
var java = '282828'

var i = 0;

runner();

function runner() {
  textarea.append(text.charAt(i));
  i++;
  setTimeout(
    function() {
      if (i < text.length)
        runner();
      else {
        textarea.append("<br>")
        i = 0;
        setTimeout(function() {feedbacker();}, 1000);
      }
    }, Math.floor(Math.random() * 220) + 50);
}

var count = 0;
var time = 5;
function feedbacker() {
  textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
  if (time % 10 == 0) {
    i++;
    textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
  }
  if (time == 3) {
    i++;
    textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
    i++;
    textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
    i++;
    textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
  }
  window.scrollTo(0, document.body.scrollHeight);  
  i++;
  time = Math.floor(Math.random() * 1000) + 1000;
  count += time;
  setTimeout(
    function() {
      if (i < output.length - 2)
        feedbacker();
      else {
        textarea.append("<br>Initialising...<br>");
        setTimeout(function() {$(".load").fadeOut(1000);}, 1000000);
      }
    },time);
}

var output = [
"Below is a vat test",
"number" (java),
"Hello",
(java),
"Above is a test",
"Initialising...", 
  ""];
html,
body {
  margin: 0 auto;
  height: 100%;
}

pre {
  padding: 0;
  margin: 0;
}

.load {
  margin: 0 auto;
  min-height: 100%;
  width: 100%;
  background: black;
}

.term {
  font-family: monospace;
  color: #fff;
  opacity: 0.8;
  font-size: 2em;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 10px;
  padding-left: 20px;
}

.term:after {
  content: "_";
  opacity: 1;
  animation: cursor 1s infinite;
}

@keyframes cursor {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="load">
  <pre class="term">dev:~$ </pre>
</div>

This outputs correctly but any time I try to add text it fails. For example:

"number" (java),
"number", (java),
"number (java)",
"number '(java)'",

I think this output may be broken because it's a textarea. I am not sure. I would love to learn and get this figured out. Much appreciated!

2 Answers

2
user2340824 On Best Solutions
var output = [
"Below is a vat test",
"number" (java),
"Hello",
(java),
"Above is a test",
"Initialising...", 
  ""];

"number" (java) and (java) are not the correct way to display Javascript Variables.

You use simply java, or use + to concatenate two strings together such as "number" + java. You could be fancier with Template literals https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals:

    var output = [
    "Below is a vat test",
    `number ${java}`,
    "Hello",
    java,
    "Above is a test",
    "Initialising...", 
      ""];
0
Scott Marcus On

Just use concatenation (+) to append a JavaScript variable to static content.

var textarea = $('.term');
var speed = 50; //Writing speed in milliseconds
var text = 'TEST';
var java = '282828'

var i = 0;

runner();

function runner() {
  textarea.append(text.charAt(i));
  i++;
  setTimeout(
    function() {
      if (i < text.length)
        runner();
      else {
        textarea.append("<br>")
        i = 0;
        setTimeout(function() {feedbacker();}, 1000);
      }
    }, Math.floor(Math.random() * 220) + 50);
}

var count = 0;
var time = 5;
function feedbacker() {
  textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
  if (time % 10 == 0) {
    i++;
    textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
  }
  if (time == 3) {
    i++;
    textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
    i++;
    textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
    i++;
    textarea.append("[    " + count / 1000 + "] " + output[i] + "<br>");
  }
  window.scrollTo(0, document.body.scrollHeight);  
  i++;
  time = Math.floor(Math.random() * 1000) + 1000;
  count += time;
  setTimeout(
    function() {
      if (i < output.length - 2)
        feedbacker();
      else {
        textarea.append("<br>Initialising...<br>");
        setTimeout(function() {$(".load").fadeOut(1000);}, 1000000);
      }
    },time);
}

var output = [
  "Below is a vat test",
  "number (" + java + ")",
  "Hello",
  "(" + java + ")",
  "Above is a test",
  "Initialising...", 
""];
html,
body {
  margin: 0 auto;
  height: 100%;
}

pre {
  padding: 0;
  margin: 0;
}

.load {
  margin: 0 auto;
  min-height: 100%;
  width: 100%;
  background: black;
}

.term {
  font-family: monospace;
  color: #fff;
  opacity: 0.8;
  font-size: 2em;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 10px;
  padding-left: 20px;
}

.term:after {
  content: "_";
  opacity: 1;
  animation: cursor 1s infinite;
}

@keyframes cursor {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="load">
  <pre class="term">dev:~$ </pre>
</div>