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

Question

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

1.2k Views Asked by user3236772 At 31 October 2025 at 09:26

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>

Original Q&A

There are 2 best solutions below

**Anton Stahl** · Answer 1

<!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>

**Birrel** · Answer 2

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

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

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in PLAINTEXT

Related Questions in STRING-LITERALS

Related Questions in ITALICS

Trending Questions

Popular # Hahtags

Popular Questions