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

2

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";

edited Aug 8, 2016 at 6:06

answered Aug 8, 2016 at 5:02

SynXsiS

1,90810 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

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

0

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

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

answered Aug 8, 2016 at 5:03

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

Comments

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

0

(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
}

edited Aug 8, 2016 at 5:13

answered Aug 8, 2016 at 5:07

Sandip - Frontend Developer

14.7k5 gold badges38 silver badges62 bronze badges

Collectives™ on Stack Overflow

Concatenate strings and format output

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related