文本区域未呈现

Question

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.一旦它位于渲染部分，您应该可以使用 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.我想我在我的 html 中遗漏了一些东西，因为我知道 java 脚本是正确的。 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. html 需要与 javascript 匹配，我太接近此看到错误。 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 &amp; 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 &amp; 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();
}

Answer 1

The console tells you where your problem is:控制台会告诉您问题出在哪里：

Uncaught TypeError: Cannot set property 'onchange' of undefined未捕获的类型错误：无法设置未定义的属性“onchange”

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>

Answer 2

Just to add to DTing's answer, to help you check bugs like these, you could hit F12 and reload your page.只是添加到 DTing 的答案中，以帮助您检查此类错误，您可以按F12并重新加载您的页面。 Check for errors in the Console tab, in this case:检查控制台选项卡中的错误，在这种情况下：

Uncaught TypeError: Cannot set property 'onchange' of undefined未捕获的类型错误：无法设置未定义的属性“onchange”

You could also check the Source tab, that would give you a hint on where the error is.您还可以检查 Source 选项卡，这会给您提示错误在哪里。

*No rep to comment *没有代表发表评论

文本区域未呈现

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-04-15 02:53:24

解决方案2
0 2015-04-15 03:21:43

文本区域未呈现

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-04-15 02:53:24

解决方案2 0 2015-04-15 03:21:43

解决方案1
1 已采纳 2015-04-15 02:53:24

解决方案2
0 2015-04-15 03:21:43