CODEWITHSUNDEEP
javascripthtmlcss
JLeno46
JLeno46

Reputation: 1269

Is possible to change the style of a specific value in a p?

I have a p with a text which changes when clicking on buttons, each button shows a different text depending on the value of a var, I want one of these text to have a different font-size. 

var language = " "; /* this var changes when another function fires, don't mind this, just know that the var changes and the possible values are 1,2,3 */

function changeText(text1, text2, text3) {
  if (language == 1) {
    document.getElementById('text').innerHTML = text1;
  } else if (language == 2) {
    document.getElementById('text').innerHTML = text2;
  } else if (language == 3) {
    document.getElementById('text').innerHTML = text3;
  } else {
    document.getElementById('text').innerHTML = "Don't think about this";
  }
}
/*yeah, I should be more DRY and not repeat document.getElementById('text') all over*/

button.addEventListener('click', () => changeText('whales', 'snails', 'this is the specific text that needs a different font-size'));
button2.addEventListener('click', () => changeText('bees', 'trees', 'this text3 is ok with the actual font-size'));

#text {
  font-size: 14px;
}

<p id='text'> dinamic text is in here </p>

I want that specific text3 to have a different font-size not all the text3. I modified the function changeText so when language == 3 the font-size of #text is different, but of course this applies to all text3. Hope I was clear, thanks for any help.

I checked similar questions, but if I do:

else if (language == 3) {
 document.getElementById('text').innerHTML = text3;
 document.getElementById('text').style.fontSize = 10px;

it changes the font-size of all text3.

Upvotes: 2

Views: 107

Answers (2)

Orange Orange
Orange Orange

Reputation: 1981

    var text = document.getElementById('text');

    function changeText(text1, text2, text3, button) {

      // default behaviour
      text.style.color = "red";
      if (language == 1) text.innerHTML = text1;
          else if (language == 2) text.innerHTML = text2;
          else if (language == 3){ 
              text.innerHTML = text3;
              // different behaviour
              if(button == "button1")
                  text.style.color = "green";
          }
      else text.innerHTML = "Don't think about this";
    }
<button onclick="changeText('hello','banana','wow','button1');" id="button1">

<button onclick="changeText('vewewve','vdsvs','dgsag','button2');" id="button2">

This code will set your text by default everytime you click on the button and language is not 3.

Upvotes: 0

Rob Monhemius
Rob Monhemius

Reputation: 5144

Since you are changing the innerHTML (opposed to innerText) you could add html tags with the text. E.g.:

JS

button.addEventListener('click', () => changeText('whales', 'snails', '<small>this is the specific text that needs a different font-size</small>'));
button2.addEventListener('click', () => changeText('bees', 'trees', 'this text3 is ok with the actual font-size'));

CSS

#text>small {
  font-size: 10px;
}

Since you are calling the same function on clicking the different buttons they will have the same behavior. So if you want to do this programatically you will need to add a new function or overcomplicate the already bulky function with weird logic.

The real question that pops up is: Why do you want this behavior?

Upvotes: 2

Related Questions