时间戳

首页 > 解决方案 > 我正在尝试显示几行 innerHTML，但它始终只显示一行

javascript - 我正在尝试显示几行 innerHTML，但它始终只显示一行

问题描述

我正在尝试在 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>

数字的一半是： 数字的双倍是： 数字的三倍是：

标签： javascriptinnerhtml

解决方案

每个.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>

推荐阅读