CODEWITHSUNDEEP
javascripthtmlplaintextstring-literalsitalics
user3236772
user3236772

Reputation: 11

How to make just the name typed into the input box displayed in italics. Please look at this code

So I only want the name which appears twice in the response to show up italicized.I am a real noob so please help me out and be clear. I appreciate it http://dave-reed.com/book3e/Ch5/greet.html Here is the example website. I want your name only out of the response to be italicized.

<!DOCTYPE html>
<!-- saved from url=(0042)http://dave-reed.com/book3e/Ch5/greet.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <title> Greetings </title>
 </head>

 <body>
   <h2>Greetings</h2>
   <p>
     Enter your name: <input type="text" id="nameBox" size="12" value="">
   </p>
   <input type="button" value="Click for Greeting" onclick="document.getElementById('outputDiv').innerHTML=
                     'Hello ' + document.getElementById('nameBox').value + 
                     ', welcome to my page.<br>Do you mind if I call you ' +
                     document.getElementById('nameBox').value + '?';"> 
   <hr>
   <div id="outputDiv"></div>

</body></html>

Upvotes: 1

Views: 1277

Answers (2)

Birrel
Birrel

Reputation: 4834

Create a new CSS rule:

.test{
    font-style: italic;
}

Then add <span class=\'test\'> </span> around each instance of the name, like this...

 <body>
   <h2>Greetings</h2>
   <p>
     Enter your name: <input type="text" id="nameBox" size="12" value="">
   </p>
   <input type="button" value="Click for Greeting" onclick="document.getElementById('outputDiv').innerHTML=
                     'Hello <span class=\'test\'>' + document.getElementById('nameBox').value + 
                     '</span>, welcome to my page.<br>Do you mind if I call you <span class=\'test\'>' +
                     document.getElementById('nameBox').value + '</span>?';"> 
   <hr>
   <div id="outputDiv"></div>

</body>

View fiddle here

Upvotes: 0

Anton Stahl
Anton Stahl

Reputation: 196

<!DOCTYPE html>
<!-- saved from url=(0042)http://dave-reed.com/book3e/Ch5/greet.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <title> Greetings </title>
<style type="text/css">
.italic {
    font-style:italic;
}
</style>
 </head>

 <body>   
<h2>Greetings</h2>
   <p>
     Enter your name: <input type="text" id="nameBox" size="12" value="">
   </p>
   <input type="button" value="Click for Greeting" onclick="document.getElementById('outputDiv').innerHTML=
                     'Hello <span class=\'italic\'>' + document.getElementById('nameBox').value + 
                     '</span>, welcome to my page.<br>Do you mind if I call you <span class=\'italic\'>' +
                     document.getElementById('nameBox').value + '</span>?';"> 
   <hr>
   <div id="outputDiv"></div>
</body></html>

Upvotes: 0

Related Questions