Multiple line out put, with multiple variables using innerHTML

Question

I've got a couple of forms on HTML giving a variable to each other. My plan is to show a sort of "receipt" to display what is being purchased.

<!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>

How can I make it so that the gloves will be displayed on separate lines?

The Important Stuff:

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

Quickest solution would be to append a <br>. "Green Gloves: " + greenglovess + "<br>" — MalcolmInTheCenter
– MalcolmInTheCenter, Commented May 19, 2021 at 4:11

Darshil Dave · Accepted Answer · 2021-05-19 04:13:34Z

2

You can add <br/> tag to add a newline in 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>

answered May 19, 2021 at 4:13

Darshil Dave

1114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

showdev · Accepted Answer · 2021-05-19 04:35:08Z

2

Use Template Literals.

See 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`);

edited May 19, 2021 at 4:35

showdev

29.3k37 gold badges61 silver badges82 bronze badges

answered May 19, 2021 at 4:12

Rajesh Verma

3072 silver badges8 bronze badges

Collectives™ on Stack Overflow

Multiple line out put, with multiple variables using innerHTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related