串连字符串和格式输出
提问于 2016-08-07 20:58:34
我正在尝试执行一个计算并在html上动态显示它。
如何仅在选定的区域格式化文本输出。
计算()，生成分配变量功率的值。
如何以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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-08-07 21:02:06
只需使用html()方法而不是text()
$("#resultpad").html("Rated Power :<strong>" + power + "</strong> watts");或不使用jquery
document.getElementById("resultpad").innerHtml = "Rated Power :<strong>" + power + "</strong> watts";Stack Overflow用户
发布于 2016-08-07 21:03:35
在这种情况下，您必须将文本包装到标记中，如下所示：
$("#resultpad").html("Rated Power :<strong>" + power + "</strong> watts");Stack Overflow用户
发布于 2016-08-07 21:07:00
(1) 在标签中指定类：类将更有帮助，因为您可以在单个类中为提供更多的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
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38821558
复制相关文章
腾讯云开发者
