How To Set "p" Tag Data Value To A Number?

When you first learn to code, you learn there are different value types. Strings, like 'Hello', booleans, like true, and numbers, like 1. How can I set the value of a

tag

Solution 1:

Javascript is an untyped language. The variable type is deduced from the value of that variable. The type of a variable could also change a value of another type is assigned to it. So things like this (for example C language):

int a; // a is an int (it will be always an int)
float f = 5.34; // f is a float (it will always be a float)

do not exist in Javascript. Javascript could use the same variable to store multiple types without redeclaring the variable.

var a = 45; // a type is deduced from the current assignement so for now it's a number
a = "string"; // now the type of a is a string not a number anymore 

You can explicitly or implicitly convert one type to another when needed.

Explicit Conversation:

you can convert a number into a string (although it will not be necessary) using .toString like this:

var num = 456;

console.log("num is of type: " + typeof(num));

var str = num.toString(); //explicitly change num to string

console.log("str is of type: " + typeof(str));

You can also convert a string into a number explicitly (this is used a lot) using parseInt if the string is an integer, parseFloat if the string is a float, or Number to get any like this:

var str = '123.45.99';

console.log("str is of type: " + typeof(str));

var num1 = parseInt(str); // will parse an integer untill the first non integer character is found (will return 12 if str == "12ppp")

console.log("num1 is of type: " + typeof(num1));

var num2 = parseFloat(str); // parses a float untill the first non float character is found (will return 75.56 if str == "75.56.55abc"

console.log("num2 is of type: " + typeof(num2));

var num3 = Number(str); // get number representation of the string (will fail (return NaN) if the string is not a valid number like "123r33")

console.log("num3 is of type: " + typeof(num3));

Implicit Conversation:

Implicit conversation is when you let for the interpretter no other choice except of handling your variable as of your type. Thus preventing it from interpretting them incorrectly. You can acheive this using a lot of ways.

To implicitly convert a number into a string, just add an empty string to that number like this:

var num = 345;

console.log("num is of type: " + typeof(num));

var str = "" + num;

console.log("str is of type: " + typeof(str));

To convert a string into a number, there are multiple ways like this:

var str = '123.45';

console.log("str is of type: " + typeof(str));

var num1 = +str; // a unary operator (that is valid for numbers only) forces the interpretter to use the value of str as a number

console.log("num1 is of type: " + typeof(num1));

Since the + operator (not the unray one) could be used for both concatenation and the addition the interpretter will always favor the concatenation on the addition if one of the operands is a string. But the other operator (/, *, / and %) are only used for number, so when a string is divided by another number, the interpretter will be forced to use the value of the string as a number:

var str = "10";

var num1 = str + 5;

console.log("num1 is: " + num1 + " and it's of type: " + typeof(num1)); // print out the wrong expectation, because since one of the operands of the + is a string (str) the interpretter will think it's a concatenation


var num2 = str * 5; // since * could be used with just numbers, the interpretter is forced to use str as a number (implicitly converting str to a number)

console.log("num2 is: " + num2 + " and it's of type: " + typeof(num2));


// to make the + operator work you'll have to use the unary operator to implicitly convert str before adding the numbers

var num3 = +str + 5;

console.log("num3 is: " + num3 + " and it's of type: " + typeof(num3));

// ++ and -- are also used with just number ..

str++; // since str++ is str = something and that something is calculated as number str will implicitly take the value of a number thus when used again it will be deduced as a number


console.log("str is: " + str + " and it's of type: " + typeof(str)); // in the previous assignment, str took the value of a number thus becoming a number

Solution 2:

HTML <p> tag specifically stands for paragraphs. So it is supposed to treat everything inside it as strings of text.

If you are sure it contains numerical value, you can convert it to a number using parseFloat(yourPtext.replace(',','')); and use it in your javascript code.

Solution 3:

Assuming that you are using the <p> parameter as a paragraph of text..

Try wrapping the <p></p> in side a <div>

Then give it an id.

Like this:

<div id="myClass"><p></p></div>

Then add some javascript like so:

<script>
var element = document.getElementById("myClass");
element.innerText = "1";
</script>

Might want to to look at this link

http://www.w3schools.com/js/js_htmldom_html.asp

Solution 4:

The <p> is the element used to wrap paragraphs. The value of a <p> tag is always text. Checking W3C HTML5 standard, you discover that the content model for <p> element is Phrasing content:

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.

So, you can display numbers inside a <p> element but they are always represented as strings. You can get the value of a paragraph as a string and then parse it to a number:

var par = document.getElementById('p1');

var val = par.innerHTML;
console.log('val:', typeof val); // Return "string"

var valNumber = parseInt(val); // Parsing the string value to integer
console.log('valNumber:', typeof valNumber); // Return "number"

<p id="p1">123</p>

Solution 5:

Using jquery you can do so in 2 ways

1) var pText = $("p").text()
var number = Number(pText)
2) var pText = $("p").text()
var number = parseInt(pText,10)

or replace <p> tag with <input type="number" value="" >