Menu
I made a website that takes what you put into the text area and displays it to another text area below.
So what you do is once you go to the site you type in the text area. Once you are satisfied you need to tab out of the text box. Once you are tabbed out you should see the text you entered at the bottom of the site. Once it is in the rendered section you should be able to modify it by using javscript. You can change the color, font size etc with sliders. The site looks correct and seems to be fine but my text wont render. I think I am missing something in my html because I know the java-script is all correct. I think I may have a spelling error or something I am not catching. The html needs to match the javascript and I am too close to this see an error. All help is welcome, thanks!
<!DOCTYPE html>
<html>
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 6
Case Problem 3
WidgetMage
Author: James DuBois
Date: 4/14/2015
Filename: cssDemo.htm
Supporting files: back.png, cssForms.css, modernizr-1.5.js,
rundemo.js, wm.css, wmlogo.png
-->
<meta charset="UTF-8" />
<title>CSS Styles Demo</title>
<script src="modernizr-1.5.js"></script>
<script type="text/javascript"src="rundemo.js"></script>
<link href="wm.css" rel="stylesheet" type="text/css" />
<link href="cssforms.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="wmlogo.png" alt="WidgetMage" />
<nav class="horizontal">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Demos</a></li>
</ul>
</nav>
</header>
<nav class="vertical">
<ul>
<li class="newgroup"><a href="#">Home</a></li>
<li class="newgroup"><a href="#">Animations</a></li>
<li><a href="#">Buttons</a></li>
<li><a href="#">Calendars</a></li>
<li><a href="#">Cookies</a></li>
<li><a href="#">Drag & Drop</a></li>
<li><a href="#">Image Tools</a></li>
<li><a href="#">Icons</a></li>
<li><a href="#">Layout Tools</a></li>
<li><a href="#">List Boxes</a></li>
<li><a href="#">Menus</a></li>
<li><a href="#">Popups</a></li>
<li><a href="#">Ribbons</a></li>
<li><a href="#">Sliders</a></li>
<li><a href="#">Spinners</a></li>
<li><a href="#">Toolbars</a></li>
<li><a href="#">Tooltips</a></li>
<li><a href="#">Tree Views</a></li>
<li class="newgroup"><a href="#">Tutorials</a></li>
<li><a href="#">Tips & Tricks</a></li>
<li><a href="#">White Papers</a></li>
<li><a href="#">User Forums</a></li>
<li><a href="#">External Links</a></li>
<li class="newgroup"><a href="#">Demonstrations</a></li>
<li class="newgroup"><a href="#">Contact Us</a></li>
</ul>
</nav>
<section>
<h1>CSS Demo</h1>
<p>Select the CSS style values from the form below and preview the
effect on the sample text in the preview box.
</p>
<form>
<fieldset id="textstring">
<label>Enter your sample text below</label>
<textarea autofocus tabindex="1" wrap="hard" name="sampletext" id="sampletext">
</textarea>
</fieldset>
<fieldset id="fonts">
<legend>
Fonts
</legend>
<label for="fontfamily">Font Family</label>
<select id="fontfamily" name="fontfamily">
<optgroup label="generic">
<option value="default">default</option>
<option value="serif">serif</option>
<option value="sans-serif">sans-serif</option>
<option value="monospace">monospace</option>
<option value="cursive">cursive</option>
<option value="fantasy">fantasy</option>
</optgroup>
<optgroup label="specific">
<option value="Arial">Arial</option>
<option value="'Book Antiqua'">'Book Antiqua'</option>
<option value="'Courier New'">'Courier New'</option>
<option value="Geneva">Geneva</option>
<option value="Helvetica">Helvetica</option>
<option value="Impact">Impact</option>
<option value="Palatino">Palatino</option>
<option value="'Times New Roman'">'Times New Roman'</option>
</optgroup>
</select>
<label for="fontstyle">Font Style</label>
<select id="fontstyle" name="fontstyle">
<option value="normal">normal</option>
<option value="italic">italic</option>
<option value="oblique">oblique</option>
</select>
<label for="fontweight">Font Weight</label>
<select id="fontweight" name="fontweight">
<option value="normal">normal</option>
<option value="bold">bold</option>
</select>
<label for="textdecoration">Text Decoration</label>
<select id="textdecoration" name="textdecoration">
<option value="none">none</option>
<option value="line-through">line-through</option>
<option value="overline">overline</option>
<option value="underline">underline</option>
</select>
<label for="texttransform">Text Transform</label>
<select id="texttransform" name="texttransform">
<option value="none">none</option>
<option value="capitalize">capitalize</option>
<option value="lowercase">lowercase</option>
<option value="uppercase">uppercase</option>
</select>
<label for="fontvariant">Font Variant</label>
<select id="fontvariant" name="fontvariant">
<option value="normal">normal</option>
<option value="small-caps">small-caps</option>
</select>
</fieldset>
<fieldset id="colors">
<legend>
Colors
</legend>
<label for="color">Font Color (hexadecimal)</label>
<input type="color" value="#000000" placeholder="#rrggbb" name="fontcolor" id="fontcolor">
<label for="color">Background Color (hexadecimal)</label>
<input type="color" value="#FFFFF" placeholder="#rrggbb" name="backgroundcolor" id="backgroundcolor">
</fieldset>
<fieldset id="sizes">
<legend>
Sizes
</legend>
<label>Font Size (px)</label>
<input type="range" value="14" min="8" max="40" step="1" name="fontsize" id="fontsize">
<label>Letter Spacing (px)</label>
<input type="range" value="0" min="0" max="10" step="1" name="letterspacing" id="letterspacing">
<label>Word Spacing (px)</label>
<input type="range" value="14" min="8" max="40" step="1" name="wordspacing" id="wordspacing">
<label>Line Height (em)</label>
<input type="range" value="1" min="0" max="4" step="0.2" name="lineheight" id="lineheight">
<label>Text Indent (px)</label>
<input type="range" value="0" min="0" max="10" step="1" name="textindent" id="textindent">
</fieldset>
<button type="button" id="removestyles">Remove Styles</button>
</form>
<h2>Rendered Text</h2>
<div id="output"></div>
</section>
</body>
</html>
JAVASCRIPT
/*
New Perspectives on HTML and CSS
Tutorial 6
Case Problem 3
Author: Anna Lopez
Date: 3/1/2014
Filename: rundemo.js
Purpose: The purpose of this program is to update the
appearance of the rendered text based on the styles
selected by the user from the form.
*/
function updatePreview() {
formStyles=document.forms[0];
inputtext=formStyles.sampletext.value;
previewobject=document.getElementById("output");
previewobject.innerHTML=inputtext.replace(/\n/g,"<br />");
ffi=formStyles.fontfamily.selectedIndex;
previewobject.style.fontFamily=formStyles.fontfamily.options[ffi].text;
fsi=formStyles.fontstyle.selectedIndex;
previewobject.style.fontStyle=formStyles.fontstyle.options[fsi].text;
fwi=formStyles.fontweight.selectedIndex;
previewobject.style.fontWeight=formStyles.fontweight.options[fwi].text;
tdi=formStyles.textdecoration.selectedIndex;
previewobject.style.textDecoration=formStyles.textdecoration.options[tdi].text;
tti=formStyles.texttransform.selectedIndex;
previewobject.style.textTransform=formStyles.texttransform.options[tti].text;
fvi=formStyles.fontvariant.selectedIndex;
previewobject.style.fontVariant=formStyles.fontvariant.options[fvi].text;
previewobject.style.color=formStyles.color.value;
previewobject.style.backgroundColor=formStyles.backgroundcolor.value;
previewobject.style.fontSize=formStyles.fontsize.value + "px";
previewobject.style.letterSpacing=formStyles.letterspacing.value+"px";
previewobject.style.wordSpacing=formStyles.wordspacing.value+"px";
previewobject.style.lineHeight=formStyles.lineheight.value+"em";
previewobject.style.textIndent=formStyles.textindent.value+"px";
}
window.onload=function() {
formStyles=document.forms[0];
formStyles.fontfamily.onchange=updatePreview;
formStyles.fontstyle.onchange=updatePreview;
formStyles.fontweight.onchange=updatePreview;
formStyles.textdecoration.onchange=updatePreview;
formStyles.texttransform.onchange=updatePreview;
formStyles.fontvariant.onchange=updatePreview;
formStyles.color.onchange=updatePreview;
formStyles.backgroundcolor.onchange=updatePreview;
formStyles.fontsize.onchange=updatePreview;
formStyles.letterspacing.onchange=updatePreview;
formStyles.wordspacing.onchange=updatePreview;
formStyles.lineheight.onchange=updatePreview;
formStyles.textindent.onchange=updatePreview;
formStyles.textstring.onchange=updatePreview;
document.getElementById("removestyles").onclick = redo;
}
function redo() {
window.location.reload();
}
887
asked Dec 06 '25 09:12
The console tells you where your problem is:
Uncaught TypeError: Cannot set property 'onchange' of undefined
on line:
formStyles.color.onchange=updatePreview;
change to:
formStyles.fontcolor.onchange=updatePreview;
then we get:
Uncaught TypeError: Cannot read property 'value' of undefined
on line:
previewobject.style.color=formStyles.color.value;
change to:
previewobject.style.color=formStyles.fontcolor.value;
function updatePreview() {
formStyles=document.forms[0];
inputtext=formStyles.sampletext.value;
previewobject=document.getElementById("output");
previewobject.innerHTML=inputtext.replace(/\n/g,"<br />");
ffi=formStyles.fontfamily.selectedIndex;
previewobject.style.fontFamily=formStyles.fontfamily.options[ffi].text;
fsi=formStyles.fontstyle.selectedIndex;
previewobject.style.fontStyle=formStyles.fontstyle.options[fsi].text;
fwi=formStyles.fontweight.selectedIndex;
previewobject.style.fontWeight=formStyles.fontweight.options[fwi].text;
tdi=formStyles.textdecoration.selectedIndex;
previewobject.style.textDecoration=formStyles.textdecoration.options[tdi].text;
tti=formStyles.texttransform.selectedIndex;
previewobject.style.textTransform=formStyles.texttransform.options[tti].text;
fvi=formStyles.fontvariant.selectedIndex;
previewobject.style.fontVariant=formStyles.fontvariant.options[fvi].text;
previewobject.style.color=formStyles.fontcolor.value;
previewobject.style.backgroundColor=formStyles.backgroundcolor.value;
previewobject.style.fontSize=formStyles.fontsize.value + "px";
previewobject.style.letterSpacing=formStyles.letterspacing.value+"px";
previewobject.style.wordSpacing=formStyles.wordspacing.value+"px";
previewobject.style.lineHeight=formStyles.lineheight.value+"em";
previewobject.style.textIndent=formStyles.textindent.value+"px";
}
window.onload=function() {
formStyles=document.forms[0];
formStyles.fontfamily.onchange=updatePreview;
formStyles.fontstyle.onchange=updatePreview;
formStyles.fontweight.onchange=updatePreview;
formStyles.textdecoration.onchange=updatePreview;
formStyles.texttransform.onchange=updatePreview;
formStyles.fontvariant.onchange=updatePreview;
formStyles.fontcolor.onchange=updatePreview;
formStyles.backgroundcolor.onchange=updatePreview;
formStyles.fontsize.onchange=updatePreview;
formStyles.letterspacing.onchange=updatePreview;
formStyles.wordspacing.onchange=updatePreview;
formStyles.lineheight.onchange=updatePreview;
formStyles.textindent.onchange=updatePreview;
formStyles.textstring.onchange=updatePreview;
document.getElementById("removestyles").onclick = redo;
}
function redo() {
window.location.reload();
}<body>
<section>
<h1>CSS Demo</h1>
<p>Select the CSS style values from the form below and preview the
effect on the sample text in the preview box.
</p>
<form>
<fieldset id="textstring">
<label>Enter your sample text below</label>
<textarea autofocus tabindex="1" wrap="hard" name="sampletext" id="sampletext">
</textarea>
</fieldset>
<fieldset id="fonts">
<legend>
Fonts
</legend>
<label for="fontfamily">Font Family</label>
<select id="fontfamily" name="fontfamily">
<optgroup label="generic">
<option value="default">default</option>
<option value="serif">serif</option>
<option value="sans-serif">sans-serif</option>
<option value="monospace">monospace</option>
<option value="cursive">cursive</option>
<option value="fantasy">fantasy</option>
</optgroup>
<optgroup label="specific">
<option value="Arial">Arial</option>
<option value="'Book Antiqua'">'Book Antiqua'</option>
<option value="'Courier New'">'Courier New'</option>
<option value="Geneva">Geneva</option>
<option value="Helvetica">Helvetica</option>
<option value="Impact">Impact</option>
<option value="Palatino">Palatino</option>
<option value="'Times New Roman'">'Times New Roman'</option>
</optgroup>
</select>
<label for="fontstyle">Font Style</label>
<select id="fontstyle" name="fontstyle">
<option value="normal">normal</option>
<option value="italic">italic</option>
<option value="oblique">oblique</option>
</select>
<label for="fontweight">Font Weight</label>
<select id="fontweight" name="fontweight">
<option value="normal">normal</option>
<option value="bold">bold</option>
</select>
<label for="textdecoration">Text Decoration</label>
<select id="textdecoration" name="textdecoration">
<option value="none">none</option>
<option value="line-through">line-through</option>
<option value="overline">overline</option>
<option value="underline">underline</option>
</select>
<label for="texttransform">Text Transform</label>
<select id="texttransform" name="texttransform">
<option value="none">none</option>
<option value="capitalize">capitalize</option>
<option value="lowercase">lowercase</option>
<option value="uppercase">uppercase</option>
</select>
<label for="fontvariant">Font Variant</label>
<select id="fontvariant" name="fontvariant">
<option value="normal">normal</option>
<option value="small-caps">small-caps</option>
</select>
</fieldset>
<fieldset id="colors">
<legend>
Colors
</legend>
<label for="color">Font Color (hexadecimal)</label>
<input type="color" value="#000000" placeholder="#rrggbb" name="fontcolor" id="fontcolor">
<label for="color">Background Color (hexadecimal)</label>
<input type="color" value="#FFFFF" placeholder="#rrggbb" name="backgroundcolor" id="backgroundcolor">
</fieldset>
<fieldset id="sizes">
<legend>
Sizes
</legend>
<label>Font Size (px)</label>
<input type="range" value="14" min="8" max="40" step="1" name="fontsize" id="fontsize">
<label>Letter Spacing (px)</label>
<input type="range" value="0" min="0" max="10" step="1" name="letterspacing" id="letterspacing">
<label>Word Spacing (px)</label>
<input type="range" value="14" min="8" max="40" step="1" name="wordspacing" id="wordspacing">
<label>Line Height (em)</label>
<input type="range" value="1" min="0" max="4" step="0.2" name="lineheight" id="lineheight">
<label>Text Indent (px)</label>
<input type="range" value="0" min="0" max="10" step="1" name="textindent" id="textindent">
</fieldset>
<button type="button" id="removestyles">Remove Styles</button>
</form>
<h2>Rendered Text</h2>
<div id="output"></div>
</section>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
