javascript - 如何将一些 HTML/文本添加到 Javascript 文本输出中？我似乎只能要么只做 JS，要么只做文本，不能两者兼而有之

Question

我目前正在尝试用 JS 和 HTML 设计一个滚动命令提示符。不幸的是，我找不到在同一行输出文本和 JavaScript 变量的方法。我感觉我已经尝试了一百万件事。

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>

输出正确，但任何时候我尝试添加文本都会失败。例如:

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

我认为这个输出可能会被破坏，因为它是一个文本区域。我不知道。我很想学习并解决这个问题。非常感谢!

Answer 1

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

"number"(java) 和 (java) 不是显示 Javascript 变量的正确方法。

您可以简单地使用java，或者使用+将两个字符串连接在一起，例如"number"+ java。您可能更喜欢模板文字 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...", 
      ""];