CODEWITHSUNDEEP
javascripthtmlcss
Teshtek
Teshtek

Reputation: 1342

How do I style dynamic contents inside a paragraph?

If I'm doing this in JavaScript :

.......
if (!isNaN(num))
    document.getElementById("isNum").innerHTML = num +" is a number";
......

Then HTML :

<div>
    <button onclick="checknum()">Insert anything : </button>
    <p id="isNum"></p>  
</div>

The output (suppose input is 3):

3 is a number

So the question is :

How can I color, maybe by css, the variable into Javascript, the output something like:

3 is a number

Upvotes: 2

Views: 868

Answers (6)

jl_
jl_

Reputation: 5539

Using <em> to emphasize the input would be more appropriate in this case. 

<p id="isNum"><em>3</em> is a Number</p>

Here is a sample snippet to work with (hope it is self-explanatory).

Idea is to wrap the value which we need to be emphasize in an inline element (for example, span or em).

Note that <b> or i or <em> elements could also be used to get the results.

function checknum() {

  // Get the `output` element
  var outputElement = document.querySelector("#isNum");

  // Get the `input` value 
  var num = document.querySelector("#numValue").value;

  // Validate: do we have a value and is it a number?
  var isNumber = num.length > 0 && !isNaN(num);

  // Format the HTML string to output
  // Wrap the value inside an inline element so that we could style it separately 
  var outputHTML = "<em>" + num + "</em>";

  // Output
  outputElement.innerHTML = isNumber ?
    outputHTML + " is a number" :
    "Not valid";
}
#isNum > em {
  color: blue;
}
#isNum > span {
  /* incase we go with span */
  font-weight: bold;
  font-style: italic;
  color: blue;
}
<div>
  <input type="text" id="numValue" />
  <button onclick="checknum()">Insert anything</button>
  <p id="isNum"></p>
</div>

Upvotes: 2

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You could wrap your num by span :

document.getElementById("isNum").innerHTML = '<span>'+num+"</span> is a number";

Then add a css rule for this specific span inside paragraph that have id #isNum :

#isNum span{
    font-weight: bold;
    color: green;
}

Hope this helps.

var num = 3;

if (!isNaN(num))
    document.getElementById("isNum").innerHTML = '<span>'+num+"</span> is a number";
#isNum span{
    font-weight: bold;
    color: green;
}
<div>
    <p id="isNum"></p>  
</div>

Upvotes: 2

adeneo
adeneo

Reputation: 318182

Just add an element

element.innerHTML = "<span class='blue'>" + num +"</span> is a number";

And style that class

function checknum() {
  var num  = prompt('Insert anything');
  var element = document.getElementById("isNum");
  
  if (!isNaN(num))
    element.innerHTML = "<span class='red'>" + num + "</span> is a number";
}
.red {color : red}
<div>
    <button onclick="checknum()">Insert anything : </button>
    <p id="isNum"></p>  
</div>

Upvotes: 0

Roysh
Roysh

Reputation: 1550

You'll need to wrap the number with a DOM element

Suppose this is the rendered HTML

<p id="isNum"><span class="num-color"> 1</span> is a color</p>

then add CSS

.num-color {
 color: yellow;
}

In order to get the HTML above, change your JavaScript code to this:

document.getElementById("isNum").innerHTML = '<span class="num-color">' + num + '</span>' +' is a number';

Upvotes: 0

jack
jack

Reputation: 2914

document.getElementById("isNum").innerHTML = "<span style='color: red;'>" + num +"</span> is a number";

Or (and this is generally considered a better practice) you could set a class on that span rather than an inline style. Then define the color for that class in your CSS, wherever that lives for your page.

JS:

innerHTML = "<span class='number'>" + num +"</span> is a number";

CSS:

.number { color: red; }

Upvotes: 1

rkeet
rkeet

Reputation: 3468

Try this:

   if (!isNaN(num))
    document.getElementById("isNum").innerHTML = '<span class="red">' + num +"</span> is a number";

Upvotes: 0

Related Questions