Member Avatar for Thomas_31 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Thomas' Story</title>
</head>
<body style="background-color:lightblue;">
<h1 style="color:Orange; text-align:center;"><B>Thomas'Story Page</B></h1>
<h1 style="color:Orange; text-align:center;"><B>Let's Make a Story Together!</B></h1>
<h2 style="color:Black; text-align:center;">You fill in the blanks and we'll go from there!</h2>
<hr>
<h3>Now, just fill in the boxes below and when you're finished click the button for your story!</h3>
<p>
Enter an Animal: 
     &nbsp;&nbsp;&nbsp;<input type="text" id="animalBox" size=20 value=""><br>
     <br>
Enter a Name:
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="nameBox" size=20 value=""><br>
     <br>
Enter a Number:
      &nbsp;&nbsp;&nbsp;<input type="number" id="numberBox" size=20 value=""><br>
     <br>
Enter an adjective:
     <input type="text" id="adjectiveBox" size=20 value=""><br>
     <br>
Enter a color:
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="colorBox" size=20 value=""><br>
     <br>
</p>
<input type="button" value = "Once upon a time..."
        onclick="document.getElementById('outputDiv').innerHTML=
                       '<p>Today was the kind of day ' + document.getElementById('nameBox').value +'loved.'</p> 
                       <p>It was a ' + document.getElementById('adjectiveBox').value + 'day.'</p>;">


 <div id="outputDiv"></div>
 </body>
 </html>
  • 2 Contributors
  • 2 Replies
  • 245 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by kgweb

Recommended Answers

All 2 Replies

Member Avatar for Thomas_31

I have another page built almost identically with a longer paragraph formatted exactly the same as this one and it works perfectly. I cannot figure out the difference. See below.

<!doctype html>
<!-- form.html                                         Dave Reed -->
<!-- Web page that generates a form letter based on user inputs. -->
<!-- =========================================================== -->

<html>
 <head>
 <meta charset="utf-8">
   <title> Form Letter Generator </title>
 </head>

 <body>
   <h2>Form Letter Generator</h2>
   <p>
     Enter recipient's name: 
     <input type="text" id="recipientBox" size=20 value=""> <br>
     Enter activity: 
     <input type="text" id="activityBox" size=20 value=""> <br>
     Enter date: <input type="text" id="dateBox" size=20 value="">
     Enter time (24 hour format): <input type="text" id="timeBox" size=5 value="">
   </p>   
     <input type="button" value="Click for Form Letter"
            onclick="document.getElementById('outputDiv').innerHTML=
                       '<p>Dear ' + document.getElementById('recipientBox').value +
                        '</p> <p> Have you heard about ' +
                        document.getElementById('activityBox').value+
                        ', which is  coming up on ' +
                        document.getElementById('dateBox').value + ' at '
                        +document.getElementById('activityBox').value +
                        '? It would mean a lot to me if you could make it to ' +
                        document.getElementById('activityBox').value +
                        '.  Hopefully, I\'ll see you  ' + 
                        document.getElementById('dateBox').value + ' at '
                        +document.getElementById('timeBox').value +'.</p>' +
                        '<p style=\'text-align:right\'>Your friend,<br> Dave</p>';">
                   <hr>
   <div id="outputDiv"></div>
 </body>
</html>
Member Avatar for kgweb

I think that the single quote after "loved." should not be there and the one after "day." should be at the end of the "</p>". Check carefully for any other similar problems which I might have missed - I did not test corrected code.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.