使用JavaScript调整文本大小 [英] Resizing Text with JavaScript

问题描述

当我点击任一按钮时，我的HTML代码中的两个按钮会增加或减少文字，但遇到问题。我有我认为是正确的JavaScript代码，我只是在按钮的工作有问题。赞赏这个问题的任何帮助。

HTML

 < ！DOCTYPE html> 
< html> 
 
< head> 
< meta charset =UTF-8/> 
< title>双子生活杂志< / title> 
< script src =modernizr-1.5.js>< / script> 
< script src =fontsizer.js>< / script> 
< link href =tlm.css =stylesheettype =text / css/> 
 
 
< / head> 
 
< body onload =startup（）> 
 
< section id =main> 
< header> 
< img src =twinlife.pngalt =张伯伦市政中心/> 
< div>搜寻
< input type =searchname =sboxid =sbox/> 
< / div> 
< / header> 
 
< nav class =horizo​​ntal> 
< ul> 
< li>< a href =＃>新闻< / a>< / li> 
< li>< a href =＃>功能< / a>< / li> 
< li>< a href =＃>文章< / a>< / li> 
< li>< a href =＃>双城店< / a>< / li> 
< li>< a href =＃>当前问题< / a>< / li> 
< li>< a href =＃>存档< / a>< / li> 
< li>< a href =＃>提交< / a>< / li> 
< li>< a href =＃>联络我们< / a>< / li> 
< / ul> 
< / nav> 
 
< nav class =vertical> 
< h1>当前问题< / h1> 
< ul> 
< h2>笔记< / h2> 
< li class =newgroup>< a href =＃>从编辑台< / a>< / li> 
< li>< a href =＃>双胞胎人员< / a>< / li> 
< li>< a href =＃>活动日历< / a>< / li> 
< li>< a href =＃> Mailbag< / a>< / li> 
< h2>文章< / h2> 
< li class =newgroup>< a href =＃>多元出生在崛起< / a>< / li> 
< li>< a href =＃>芝加哥会议：大事件< / a>< / li> 
< li>< a href =＃>青少年双胞胎< / a>< / li> 
< li>< a href =＃>双胞胎与会说话< / a>< / li> 
< li>< a href =＃>切换角色< / a>< / li> 
< h2>功能< / h2> 
< li class =newgroup>< a href =＃>双提示< / a>< / li> 
< li>< a href =＃>本月照片< / a>< / li> 
< li>< a href =＃>食谱角落< / a>< / li> 
< li>< a href =＃>使用者报告< / a>< / li> 
< li>< a href =＃>交换聚会< / a>< / li> 
< li class =newgroup>< a href =＃>读者调查< / a>< / li> 
< / ul> 
< / nav> 
 
<文章> 
< hgroup> 
< div id =fontbuttons> 
< input type =imageid =fontdownalt = - src =fontdown.pngbutton value = -  0.1/> 
< input type =imageid =fontupalt =+src =fontup.pngbutton value =0.1/> 
 window.onload = function（）{startup（）;}; 
< / div> 
 
< h1>双胞胎与会话< / h1> Peter Kuhlman，M.D.，Ph.D.< / h2>的
< h2> 
 
< / hgroup> 
< figure> 
< img src =kuhlman.pngalt =/> 
< / figure> 
 
< p>通话在讲话前很久才发生。婴儿通过哭泣，笑声，微笑和
指向与父母沟通
。细心的家长很快就会习惯于这种非言语交流。通常在
生活的第二年，婴儿将开始为这些行为添加单个单词
的表达。一个婴儿会指着一个杯子说喝。 
名字妈妈和达达是宝宝的第一口宝贝。 
< / p> 
 
随着孩子年龄的增长，他或她会将新单词添加到
这些表达式中，并开始使用单词
组合：get drink me。。父母向孩子提供视觉
和音频反馈，鼓励发展
的演讲。通过一个叫做呼应的过程，父母
自然会重复他们的孩子说的话，提供
的重要确认，说明孩子说过的
已被听到和理解。 
< / p> 
< p>双胞胎的情况可能会有所不同。 
父母经常无法提供单身孩子经常享受的
一对一反馈。可能是提供大部分反馈的
是另一个！ 
< / p> 
 
另一个双胞胎通常是一位非常细心的和
的热衷读者，他或她无法提供语言发展所需的
类型反馈。双胞胎
不能纠正对方在使用单词
或语法时的错误。而且，通过相互沟通，
双胞胎必然会减少与成年人和大孩子的交流费用
。在某些情况下，双胞胎会变成b $ b这样的好听众，他们会失去兴趣
与父母沟通！ 
< / p> 
 
在极少数情况下，这种一对一沟通可以将
推到创建共享语言的地步。 
双胞胎会拿出自己的单词，在一些
的情况下，他们自己的语法结构。除了双胞胎之外，其他任何人都无法理解语言
。尽管这些案例已经很好地公布，但这些案例非常罕见。 
双胞胎的秘密语言通常会在年龄
 4或5后消失，因为他们会更善于使用他们的
父母的语言。 
< / p> 
< p>您可以如何帮助您的双胞胎获得
语言？你可以做的最重要的事情是给每个孩子个人注意
。说比
更容易完成！向每个孩子提供反馈，因为他或她使用语言搜索
。如果你正在喂养你的双胞胎，那么跟另一个
的孩子谈谈，因为对方正在吃东西。然后，当第一个孩子
在吃东西时，切换到第二个孩子。当更换
纸尿裤时，使用一对一的时间（一个希望）进一步
提供学习语言所需的音频线索。 
< / p> 
< p>与双胞胎相关的所有事情一样，语言
的收购需要
父母部分的额外工作;但再次与双胞胎相关的活动，
额外的工作是额外的乐趣。 
< / p> 
< / article> 
 
 
< footer> 
 Twin Life杂志：第189期; &安培;复印件; 2015年（美国）
< span> 
< a href =＃>关于< / a> 
< a href =＃>条款< / a> 
< a href =＃>帮助< / a> 
< / span> 
< / footer> 
 
< / section> 
 
< / body> 
 
< / html> 
  

JavaScript

  function startup（）{
 var fontButtons = document.getElementsByClassName（fontsizer）; 
 var i; 
 alert（fontButtons.length）; 
 for（i = 0; i< fontButtons.length; i ++）{
 fontbuttons [i] .onclick = function（）{resizeText（this）;}; 
} 
 
 function resizeText（ObjectButton）{
 var fontChange; 
 fontChange = parseFloat（objectButton.value）; 
 
 if（document.body.style.fontSize ==）{
 document.body.fontSize =1.0em; 
} 
 
 var currentFontSize; 
 alert（changed）; 
 currentFontSize = parseFloat（document.body.style.fontSize）; 
 currentFontSize = currentFontSize + fontChange; 
 document.body.style.fontSize =currentFontSize + em
} 
} 
  

<首先为按钮添加 fontsizer class name：

 < input class =fontsizertype =imageid =fontdownalt = - src =fontdown.pngbutton value = -  0.1/ > 
< input class =fontsizertype =imageid =fontupalt =+src =fontup.pngbutton value =0.1/> 
  

然后：

  function startup（）
 {
 var fontButtons = document.getElementsByClassName（fontsizer）; 
 alert（fontButtons.length）; 
 for（i = 0; i< fontButtons.length; i ++）
 {
 fontButtons [i] .onclick = function（）
 {
 resizeText（this ）; 
}; 
 
 
 function resizeText（objectButton）
 {
 var fontChange = parseFloat（objectButton.value）; 
 
 if（document.body.style.fontSize ==）
 {
 document.body.style.fontSize =1.0em; 
} 
 
 var size = document.body.style.fontSize; 
 var currentFontSize = parseFloat（size）; 
 currentFontSize + = fontChange; 
 document.body.style.fontSize = currentFontSize +em
} 
} 
  

请注意，变量名称区分大小写，所以 ObjectButton 和 objectButton 是不一样的，不要将变量放入字符串中，它们的值不会被使用，也不需要首先声明变量然后初始化它们，你可以同时这样做。

JSFiddle

I have a problem with making two buttons in my HTML code increase or decrease text when I click on either button. I have what I think is the correct javascript code I just have a problem with the buttons working. Any help with this issue is appreciated.

HTML

<!DOCTYPE html>
<html>

   <head>
      <meta charset="UTF-8" />
      <title>Twin Life Magazine</title>
      <script src="modernizr-1.5.js"></script>
      <script src="fontsizer.js"></script>
      <link href="tlm.css" rel="stylesheet" type="text/css" />


   </head>

   <body onload="startup()">

  <section id="main">
     <header>
        <img src="twinlife.png" alt="The Chamberlain Civic Center" />
        <div>Search
           <input type="search" name="sbox" id="sbox" />
        </div>
     </header>

     <nav class="horizontal">
        <ul>
           <li><a href="#">News</a></li>
           <li><a href="#">Features</a></li>
           <li><a href="#">Articles</a></li>
           <li><a href="#">Twins Store</a></li>
           <li><a href="#">Current Issue</a></li>
           <li><a href="#">Archive</a></li>
           <li><a href="#">Submissions</a></li>
           <li><a href="#">Contact Us</a></li>
        </ul>
     </nav>

     <nav class="vertical">
        <h1>Current Issue</h1>
        <ul>
           <h2>Notes</h2>
           <li class="newgroup"><a href="#">From the Editor's Desk</a></li>
           <li><a href="#">Twin Life Staff</a></li>
           <li><a href="#">Event Calendar</a></li>
           <li><a href="#">Mailbag</a></li>
           <h2>Articles</h2>
           <li class="newgroup"><a href="#">Multiple Births on the Rise</a></li>
           <li><a href="#">Chicago Convention: A Great Event</a></li>
           <li><a href="#">Twins in Adolescence</a></li>
           <li><a href="#">Twins and Talking</a></li>
           <li><a href="#">Switching Roles</a></li>
           <h2>Features</h2>
           <li class="newgroup"><a href="#">Twin Tips</a></li>
           <li><a href="#">Photos of the Month</a></li>
           <li><a href="#">Recipe Corner</a></li>
           <li><a href="#">Consumer Report</a></li>
           <li><a href="#">Swap Meet</a></li>
           <li class="newgroup"><a href="#">Reader Survey</a></li>
        </ul>
     </nav>

     <article>
        <hgroup>
           <div id="fontbuttons">
              <input type="image" id="fontdown" alt="-" src="fontdown.png" button value="-0.1" />
              <input type="image" id="fontup" alt="+" src="fontup.png" button value="0.1" />
              window.onload=function(){startup();};
           </div>

           <h1>Twins and Talking</h1>
           <h2>by Peter Kuhlman, M.D., Ph.D.</h2>

        </hgroup>
        <figure>
           <img src="kuhlman.png" alt="" />
        </figure>

        <p>Communication occurs long before speech. Babies communicate 
           with their parents through crying, laughter, smiling and 
           pointing. The attentive parent quickly becomes attuned to 
           this "non-speech" communication. Usually in the second year of 
           life, babies will begin to add single words to these acts 
           of expression. A baby will point to a cup and say, "drink."
           The names "Mama" and "Dada" are among the first out of a
           baby's mouth.
        </p>
        <p>As the child gets older, he or she will add new words to 
           these expressions and will begin to use words in 
           combination: "get drink me." The parents provide visual
           and audio feedback to the child, encouraging the development 
           of speech. Through a process called echoing, parents 
           will naturally repeat what their child says, providing an 
           important confirmation that what the child has said has 
           been heard and understood.
        </p>
        <p>With twins, the situation may be slightly different. 
           Often parents cannot provide the one-to-one feedback that 
           single children routinely enjoy. It may be that the one 
           providing most of the feedback is the other twin!
        </p>
        <p>While the other twin is usually a very attentive and 
           eager audience, he or she cannot provide the type of 
           feedback needed for language development. Twins
           cannot correct each other's mistakes in the use of words 
           or grammar. Moreover, by communicating with each other, 
           twins are necessarily decreasing the amount of communication 
           with adults and older children. In some cases, twins become 
           such good audiences for each other, they lose interest
           in communicating with their parents!
        </p>
        <p>In rare cases, this one-to-one communication can progress 
           to the point at which a shared language is created. 
           The twins will come up with their own words, and in some 
           cases, their own grammatical structures. The languages
           are unintelligible to anyone else but the twins. These cases 
           are very rare, even though they are well publicized. 
           The twin's secret language will usually disappear by age 
           4 or 5, as they become more adept at using their
           parent's language.
        </p>
        <p>What can you do to help your twins in acquiring 
           language? The most important thing you can do is pay 
           individual attention to each child. Easier said than
           done! Provide feedback to each child as he or she gropes 
           with language. If you are feeding your twins, talk to one 
           child as the other is eating. Then, when the first child 
           is eating, switch to the second. When changing
           diapers, use the one-on-one time (one hopes) to further 
           provide the audio clues needed for learning language.
        </p>
        <p>As with everything that is twin-related, language 
           acquisition requires some extra work on the part of the 
           parents; but again with twin-related activities,
           the extra work is paid off in extra fun.
        </p>
     </article>


     <footer>
        Twin Life Magazine: Issue 189; &copy; 2015 (US)
        <span>
           <a href="#">About</a>
           <a href="#">Terms</a>
           <a href="#">Help</a>
        </span>
     </footer>

  </section>

  </body>

  </html>

JavaScript

function startup() {
   var fontButtons = document.getElementsByClassName("fontsizer");
   var i;
   alert(fontButtons.length);
   for (i = 0; i < fontButtons.length; i++) {
      fontbuttons[i].onclick = function(){resizeText(this);};
   }

   function resizeText(ObjectButton) {
      var fontChange;
      fontChange = parseFloat(objectButton.value);

      if (document.body.style.fontSize == "") {
      document.body.fontSize = "1.0em";
    }

  var currentFontSize;
  alert("changed");
  currentFontSize = parseFloat(document.body.style.fontSize);
  currentFontSize = currentFontSize + fontChange;
  document.body.style.fontSize = "currentFontSize+em"
   }
}

解决方案

First add fontsizer class name to the buttons:

<input class="fontsizer" type="image" id="fontdown" alt="-" src="fontdown.png" button value="-0.1" />
<input class="fontsizer" type="image" id="fontup" alt="+" src="fontup.png" button value="0.1" />

Then:

function startup()
{
    var fontButtons = document.getElementsByClassName ("fontsizer");
    alert (fontButtons.length);
    for (i = 0; i < fontButtons.length; i++)
    {
        fontButtons[i].onclick = function()
        {
            resizeText(this);
        };
    }

    function resizeText (objectButton)
    {
        var fontChange = parseFloat (objectButton.value);

        if (document.body.style.fontSize == "")
        {
            document.body.style.fontSize = "1.0em";
        }

        var size = document.body.style.fontSize;
        var currentFontSize = parseFloat(size);
        currentFontSize += fontChange;
        document.body.style.fontSize = currentFontSize + "em"
    }
}

Note that variables names are case sensitive, so ObjectButton and objectButton are not the same, also don't put variables inside strings their values wont be used, also there's no need to declare variables first and then initialize them, you can do that simultaneously.

JSFiddle

这篇关于使用JavaScript调整文本大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！