<!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:
<input type="text" id="animalBox" size=20 value=""><br>
<br>
Enter a Name:
<input type="text" id="nameBox" size=20 value=""><br>
<br>
Enter a Number:
<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:
<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>
Thomas_31 0 Newbie Poster
Thomas_31 0 Newbie Poster
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>
kgweb 0 Newbie Poster
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.