Question

我正在尝试执行计算并在html上动态显示它。

如何仅在选定区域中格式化文本输出。

calculate（），generate为var power赋值。

如何在html中以下列格式显示结果。如果可能的话，在Jquery和纯js版本中使用正确的方法。

额定功率： 18 瓦特。

function calculation() {
  var num1 = document.getElementById("num1");
  var num2 = document.getElementById("num2");
  var power = (parseFloat(num1.value) * parseFloat(num2.value));

  console.log("Power = " + power + " watts");
  /* html output  */
  $("#resultpad").text("Rated Power :" + power + " watts");

  // Is it possible only to display the value of Variable power in bold text <strong>power</strong> watts
}

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

<body>
  <div id="inputForm">
    <p>Fill electrical ratings</p>
    <p>Voltage:
      <input type="text" name="num1" id="num1" />
    </p>
    <p>Current:
      <input type="text" name="num2" id="num2" />
    </p>
    <p id="resultpad"></p>
    <!-- outout generated by calculation() -->
    <p>
      <button onclick="calculation()">Submit</button>
    </p>
  </div>
</body>

Answer 1

只需使用html（）方法而不是text（）

$("#resultpad").html("Rated Power :<strong>" + power + "</strong> watts");

或不使用jquery

document.getElementById("resultpad").innerHtml = "Rated Power :<strong>" + power + "</strong> watts";

Answer 2

在这种情况下，您必须将文本包装成标签，如：

$("#resultpad").html("Rated Power :<strong>" + power + "</strong> watts");

Answer 3

（1）在label中指定类：class会更有帮助，因为您可以在单个类中提供更多css

$("#resultpad").html("Rated Power :<span class='calculationText'>" + power + "</span > watts");

<style>
.calculationText
{
    font-weight:bold;
}

（2）将html 分配给元素而不是文字并更改您的功能，如下所示。

function calculation() {
    var num1 = document.getElementById("num1");
    var num2 = document.getElementById("num2");
    var power = (parseFloat(num1.value) * parseFloat(num2.value));

    console.log("Power = " + power + " watts");
    /* html output  */
    $("#resultpad").html("Rated Power :<strong>" + power + "</strong> watts");

    // Is it possible only to display the value of Variable power in bold text <strong>power</strong> watts
}

连接字符串和格式输出

3 个答案: