嘿伙计们，所以我创建了一个网站，将您放入文本区域的内容显示在下面的另一个文本区域。
所以，一旦你进入你在文本区域输入的网站，你所做的就是。一旦您满意，您需要从文本框中选择标签。选中标签后，您应该会看到您在网站底部输入的文字。一旦它在渲染部分中，您应该能够使用javscript对其进行修改。您可以使用滑块更改颜色，字体大小等。该网站看起来正确，似乎很好，但我的文字不会呈现。我想我的html中缺少一些东西因为我知道java脚本都是正确的。我想我可能有拼写错误或者我没有抓到的东西。 html需要匹配javascript，我太接近这个看到错误。欢迎大家帮忙，谢谢！
<!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();
}
答案 0 :(得分：1)
控制台会告诉您问题所在：
未捕获的TypeError：无法设置未定义的属性'onchange'
在线：
formStyles.color.onchange=updatePreview;
更改为：
formStyles.fontcolor.onchange=updatePreview;
然后我们得到：
未捕获的TypeError：无法读取未定义的属性“值”
在线：
previewobject.style.color=formStyles.color.value;
更改为：
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>
答案 1 :(得分：0)
只是要添加到DTing的答案，为了帮助您查看这些错误，您可以点击 F12 并重新加载您的页面。在“控制台”选项卡中检查错误，在这种情况下：
未捕获的TypeError：无法设置属性＆＃39; onchange＆＃39;未定义的
您还可以检查“来源”标签，这样可以提示您错误的位置。
*没有回复评论