多行输出，使用 innerHTML 的多个变量

Question

我在 HTML 上有几个表格，它们互相给了一个变量。我的计划是显示一种“收据”来显示正在购买的东西。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<p>Review Purchases</p>
<p id="recipt"></p>
<button onClick="refresh()" type="button">Refresh</button>
<p><a href="Payment.html">PAY NOW</a></p>
    
</body>
<script>
    greenglovess = localStorage.getItem("greengloves");
    blackglovess = localStorage.getItem("blackgloves");
    whiteglovess = localStorage.getItem("whitegloves");
    redglovess = localStorage.getItem("redgloves");
    
    
    function refresh(){
        document.getElementById("recipt").innerHTML =
            "Green Gloves: " + greenglovess +
            "Black Gloves: " + blackglovess +
            "White Gloves: " + whiteglovess +
            "Red Gloves: " + redglovess;
    }
</script>
</html>

怎样才能让手套分行显示？

重要的东西：

<script>
    greenglovess = localStorage.getItem("greengloves");
    blackglovess = localStorage.getItem("blackgloves");
    whiteglovess = localStorage.getItem("whitegloves");
    redglovess = localStorage.getItem("redgloves");


    function refresh(){
        document.getElementById("recipt").innerHTML =
            "Green Gloves: " + greenglovess +
            "Black Gloves: " + blackglovess +
            "White Gloves: " + whiteglovess +
            "Red Gloves: " + redglovess;
    }
</script>

Answer 1

使用Template Literals.

参见Multiline Strings：

Any newline characters inserted in the source are part of the template literal.

console.log(`string text line 1
string text line 2`);

Answer 2

您可以添加 <br/> 标签以在 HTML

中添加换行符

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>

<body>
  <p>Review Purchases</p>
  <p id="recipt"></p>
  <button onClick="refresh()" type="button">Refresh</button>
  <p><a href="Payment.html">PAY NOW</a></p>

</body>
<script>
  greenglovess = localStorage.getItem("greengloves");
  blackglovess = localStorage.getItem("blackgloves");
  whiteglovess = localStorage.getItem("whitegloves");
  redglovess = localStorage.getItem("redgloves");


  function refresh() {
    document.getElementById("recipt").innerHTML =
      "Green Gloves: " + greenglovess + "<br/>" +
      "Black Gloves: " + blackglovess + "<br/>" +
      "White Gloves: " + whiteglovess + "<br/>" +
      "Red Gloves: " + redglovess;
  }
</script>

</html>

多行输出，使用 innerHTML 的多个变量

Multiple line out put, with multiple variables using innerHTML

html

javascript

innerhtml