Making part of text bold and/or underlined in java

[benw]

I have a .js script which is a slide show with captions. I am able to underline or bold the entire caption with the CSS but would like to bold and/or underline parts of it - not the entire caption.

 

Can anyone help?

 

The entire script is below. The captions are in function initCaption ().

<!--var place = 0;var stop = 0;var auto = true;var secdelay = 3000;var current = 0;var cnt = 0;var bName;var bVer;var goodnum = 0;var buts = false;var caps = false;var browsercompatible = false;var x = new Array();var pcnt = 0;// x[0] = {"q":"progid:DXImageTransform.Microsoft.Fade(duration=0, overlap=0, center=0)"};function startdisplay()  {    if(bName != "Netscape") {         document.body.background = "#004800";   } }function changedisplay(cnt)  {         	 var pcnt = cnt + 1;         window.status = "Picture #" + pcnt + " of " + picz.length;       if(caps == true) {         var msg = document.getElementById("text");         msg.style.textAlign = "left";         msg.style.fontSize = "17";         msg.style.fontFamily = "Book Antiqua";         msg.style.color = TxtForeCol[cnt];    //       msg.style.textDecoration="none|underline|overline|line-through|blink|inherit"; //       msg.style.backgroundColor = TxtAreaBkCol[cnt];         msg.innerText = capz[cnt];         }//     if(browsercompatible) form1.docimage.style.filter=x[randomNum(x.length - 1)].q;       if(!document.images) return;       if(browsercompatible) document.form1.docimage.filters[0].apply();       document.form1.docimage.src= picz[cnt];       if(browsercompatible) document.form1.docimage.filters[0].play();       }function asktoclose() {         var quit = false;         quit = confirm("Are you sure you want to quit?");                if(quit==true)                   window.close();   }function initPics () { this.length = initPics.arguments.length;for (var i=0; i < this.length; i++) { this[i] = initPics.arguments[i];   } }var picz = new initPics ("scc1-vdh-marker.jpg","scc2-v.jpg","scc3-v.jpg","scc4-v.jpg","scc5-v.jpg","scc6-v.jpg","scc7-v.jpg","scc8-v.jpg","scc9-v.jpg","scc10-v.jpg","scc11-v.jpg","scc12-v.jpg","scc13-v.jpg","scc14-v.jpg","scc15-v.jpg","scc16-v.jpg","scc17-v.jpg","scc18-v.jpg");function initCaption () { this.length = initCaption.arguments.length;for (var i=0; i < this.length; i++) { this[i] = initCaption.arguments[i];   } }var capz = new initCaption ( "First Hole Tip: Hit your first shot toward the tree to the left of the green.","Second Hole","Third Hole","Fourth Hole","Fifth Hole","Sixth Hole","Seventh Hole","Eighth Hole","Ninth Hole","Tenth Hole","Eleventh Hole","Twelfth Hole","Thirteenth Hole","Fourteenth Hole","Fifteenth Hole","Sixteenth Hole","Seventeenth Hole","Eightteenth Hole");function initTxtForeCol () { this.length = initTxtForeCol.arguments.length;for (var i=0; i < this.length; i++) { this[i] = initTxtForeCol.arguments[i];   } }var TxtForeCol = new initTxtForeCol("#ffffff");function initTxtAreaBkCol () { this.length = initTxtAreaBkCol.arguments.length;for (var i=0; i < this.length; i++) { this[i] = initTxtAreaBkCol.arguments[i];   } }function keycheck() {          var charkey = 0;         var quit = false;         charkey = window.event.keyCode; switch (charkey) {           case 69:asktoclose();                  break; //exit          case 72:help();                  break; //help          case 32:checkIt(1);                  break; //spacebar          case 8:checkIt(-1);                  break; //backspace          case 83:togglenobuttons(0);                  break; //stop          case 65:togglenobuttons(1);                  break; //auto run          case 70:checkIt(1);                  break; //forward          case 66:checkIt(-1);                  break; //back          case 84:checkIt(3);                  break; //'t' fast forward          case 82:checkIt(-3);                  break; //'r' rewind                  default:togglenobuttons(0);                  break; //stop         }  }function help() {   alert("Use these keys as follows: 'H'(help), 'B'or backspace(back), 'F'or spacebar(forward), 'R'(rewind), 'T'(fast forward), 'A'(auto run), 'S'(stop), 'E'(exit) --- If no reaction to keys when pressed, hit the Tab key then press a key");  }function checkIt(val)  {  if(browsercompatible) {        if(buts == true) {          form1.aut.value = "Play";          form1.aut.title = "Press this Button to Start Movie Mode";         }       }          auto = false;		   		     goodnum =  place + val;//cntif(goodnum < 0)  { goodnum = 0;   changedisplay(goodnum);   alert("You are at the beginning! Press: 'Forward'");   } else if(goodnum > picz.length -1) { goodnum = picz.length -1;   changedisplay(goodnum);   alert("You are at the End of the Slide Show! Press: 'Back'");  }else { changedisplay(goodnum);       place = goodnum;   }  }function togglenobuttons(runnow)  {       if (runnow == 1) {     auto = true;     setTimeout('FlipImage()',secdelay); }else {     auto = false;  } }function autorun()  {    if (auto == false) {   document.net.aut.value = " Stop ";   document.net.ff.value = "  Forward  ";   document.net.bb.value = "  Back  ";   auto = true;   setTimeout('FlipImage()', secdelay);   }else if (auto == true) {    document.net.aut.value=" Play ";   auto = false;   } }function resetnetscapebutton() {   document.net.aut.value ="  Play  ";   auto = false; }function togglebuttons()  {    if (form1.aut.value == "Play")  {      form1.aut.value = "  Stop  ";      form1.aut.title = "Press any button to Stop auto mode!";      form1.ff.value = "  Forward  ";      form1.bb.value = "  Back  ";      auto = true;      setTimeout('FlipImage()', secdelay);  }else if (form1.aut.value != "Play")  {       form1.aut.value = "Play";       form1.aut.title = "Press this Button to Start Movie Mode!";       auto = false;   }  }function FlipImage()  {   var pcnt = 0;  if (auto == true) {      if (place < picz.length -1)       { place++; }     else if(place == picz.length -1)       { place = 0; }     else      { goodnum = 0; }       pcnt = place + 1;     if(buts == true && bName == "Microsoft Internet Explorer")  {form1.aut.value = "Stop - Hole  # " + pcnt; } // + " of " + picz.length; } else if( (buts == true && bName != "Microsoft Internet Explorer") || (buts == true && bName=="Netscape") || (buts == true && bName==undefined) )  {document.net.aut.value = "Stop - Hole  # " + pcnt; } // + " of "  + picz.length; }         changedisplay(place);       setTimeout('FlipImage()', secdelay);     }  else     clearTimeout(stop);    }function picnum() {  if(browsercompatible || bName=="Microsoft Internet Explorer") {      var pn = goodnum + 1;      form1.ff.value = "Forward - Hole # " + pn; //+ " of " + picz.length;      form1.bb.value = " Back - Hole # " + pn; // + " of " + picz.length ;     } else  {       var pn = goodnum + 1;     document.net.ff.value = "    Forward - Hole # " + pn //+ " of " + picz.length + "    ";     document.net.bb.value = "    Back - Hole # " + pn //+ " of " + picz.length + "     ";     }   }function hasbutscaps(b,c) {  buts = b;  caps = c;var useragent = navigator.userAgent;bName = (useragent.indexOf('Opera') > -1) ? 'Opera' : navigator.appName;var pos = useragent.indexOf('MSIE'); if (pos > -1) {bVer = useragent.substring(pos + 5);var pos = bVer.indexOf(';');bVer = bVer.substring(0,pos);}var pos = useragent.indexOf('Opera'); if (pos > -1)   {bVer = useragent.substring(pos + 6);var pos = bVer.indexOf(' ');bVer = bVer.substring(0, pos);}if (bName == "Netscape") {bVer = useragent.substring(8);var pos = bVer.indexOf(' ');bVer = bVer.substring(0, pos);}if (bName == "Netscape"  && parseInt(navigator.appVersion) >= 5) {var pos = useragent.lastIndexOf('/');bVer = useragent.substring(pos + 1);}if(bName == "Microsoft Internet Explorer" && bVer >= 5.5)  browsercompatible = true;else browsercompatible = false;}function goRainbow() { if(bName == "Microsoft Internet Explorer") startRainbow(); } function randomNum(n) {  number = Math.floor(Math.random()*(n+1));  return number;}    //-->

Thanks for your help!

 

Ben

Edited February 20, 2014 by benw

[justsomeguy]

You'll need to add something like span tags inside the captions that you can use to apply styling to certain words. In the changedisplay function you'll also need to change it to set innerHTML instead of innerText.