Concatenate strings and format output

Question

I'm trying to perform a calculation and display it dynamically on html.

How can I format text output only in a selected area.

The calculate(), generate assign the value for the var power.

How can i display result in following format in html. If possible the correct method in Jquery and pure js version.

rated power: 18 watts.

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>

Do you mean you want the text to already be in the element, and only have to add the number inside? If so you can use a  tag. Rated Power : watts. — Spencer Wieczorek
– Spencer Wieczorek, Commented Aug 8, 2016 at 5:05
Hi Spencer, the original element should not have any text. Only upon the button submit to show the output. SynXsis answer does the job. But i'd like to have the pure javascript version on the answer. — rush dee
– rush dee, Commented Aug 8, 2016 at 6:32

SynXsiS · Accepted Answer · 2016-08-08 06:06:05Z

Just use the html() method instead of text()

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

or without using jquery

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

Mayank Pandeyz · Accepted Answer · 2016-08-08 05:03:35Z

In that case you have to wrap your text into tag like:

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

Sandip - Frontend Developer · Accepted Answer · 2016-08-08 05:13:02Z

(1) specify class in label : class will be more helpful as you can give more css in single class

$("#resultpad").html("Rated Power :<span class='calculationText'>" + power + "</span > watts"); <style> .calculationText { font-weight:bold; }

(2) Assign html to element instead of text and change your function as below.

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 }

Collectives™ on Stack Overflow

Concatenate strings and format output

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related