我试图显示几行 innerHTML，但它一直只显示一行

Question

我正在尝试在 javascript 上布置家庭作业。在作业中，我被要求输入一个数字，然后我必须对该数字进行一些数学运算。最后，我必须在屏幕上显示带有这些数学运算的线条。我的问题是我不知道如何使用 innerhtml 显示多行。

我尝试为 document.getElementbyid 创建多个 ID，但没有用。

<!DOCTYPE html>
    <html>
    <body>
    
    <h2>Oppgave 1 - Lek med tall</h2>
    
    <p>Input a (one) number and click the button:</p>
    
    <input id="tall" value="1" />
    
    <button onclick="myFunction()">Try it</button>
    
    <p id="demo"></p>
    
    <script>
    function myFunction() {
      var t;
       t= Number(document.getElementById("tall").value);
       var c=t/2
       var b=t*2
       var v=t*3
       var w=t**2
    
      document.getElementById("demo").innerHTML = "Halfpart of the number is: "+c;
      document.getElementById("demo").innerHTML = "The double of the number is: "+b;
    document.getElementById("demo").innerHTML = "The triple of the number is: "+b;
    }
    </script>
    
    </body>
    </html>

一半的数字是：数字的两倍是：数字的三元组是：

Answer 1

每个.innerHTML =都覆盖它前面的一个，使用模板字符串构造整个字符串并立即分配它（并插入换行符（<br>s）以显示每个句子在单独的一行中）：

function myFunction() {
  var t;
  t = Number(document.getElementById("tall").value);
  var c = t / 2;
  var b = t * 2;
  var v = t * 3;
  var w = t ** 2;

  document.getElementById("demo").innerHTML = `
  Halfpart of the number is: ${c}<br>
  The double of the number is: ${b}<br>
  The triple of the number is: ${v}<br>
  `;
}

<h2>Oppgave 1 - Lek med tall</h2>
<p>Input a (one) number and click the button:</p>
<input id="tall" value="1" />
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

在不使用模板字符串的情况下，您可以对第二个和第三个句子使用 .innerHTML +=，这样它们就不会覆盖任何内容：

function myFunction() {
  var t;
  t = Number(document.getElementById("tall").value);
  var c = t / 2;
  var b = t * 2;
  var v = t * 3;
  var w = t ** 2;
  
  var demo = document.getElementById("demo");

  demo.innerHTML = 'Halfpart of the number is: ' + c + '<br>';
  demo.innerHTML += 'The double of the number is: ' + b + '<br>';
  demo.innerHTML += 'The triple of the number is: ' + v + '<br>';
}

<h2>Oppgave 1 - Lek med tall</h2>
<p>Input a (one) number and click the button:</p>
<input id="tall" value="1" />
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

Answer 2

每次使用 innerHTML= 分配新值时，都会覆盖以前的值。如果您想要 "demo" 元素中的所有文本，但需要将该过程分成三行，请尝试 += 运算符。

有多种技术可以显示不同的线条。尝试制作三个不同的 p 元素（"demo1"、"demo2"、"demo3"），或者在前两行的末尾添加一个 <br> 标记。

document.getElementById("demo").innerHTML = "Halfpart of the number is: "+c;
document.getElementById("demo").innerHTML += "The double of the number is: "+b;
document.getElementById("demo").innerHTML += "The triple of the number is: "+b;

我试图显示几行 innerHTML，但它一直只显示一行

I am trying to display several lines of the innerHTML, but it show only one line all the time

javascript

innerhtml