老师 为什么没有出现超出多少个字?

老师 为什么没有出现超出多少个字?

<!DOCTYPE html>

<html>

    <head>

    <meta charset="UTF-8">

    <title>输入文本</title>

    <style type="text/css">

   



    </style>

</head>

<body>

    <p id="p">字数限制在30字内,<span id="p">您还可以输入<b id="count">30</b></span>字符</p>


        <div class="input">

          <textarea name="" id="textarea" cols="80" rows="5"></textarea>

        </div>


<script type="text/javascript">

  //获取文本框

  var textarea=document.getElementById('textarea');

  var total=30;

  var count=document.getElementById('count');

  var p=document.getElementById('p');

  //绑定键盘事件

  document.onkeyup=function(event){

   //获取文本框值的长度

                  var len=textarea.value.length;

                  var allow=total-len;

                  count.innerHTML=allow;

                  count.style.fontWeight=bold;

                  if (allow<0) {

                      p.innerHTML="您以超出"+(-allow)+"个字"; 

                  }else{

                    p.innerHTML="您还可以输入"+allow+"个字"; 

                  }


  };

</script>

</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,通过innerHTML的属性,会改变当前对象里面的结构,如下:

http://img1.sycdn.imooc.com//climg/5c89b4700001059607880386.jpg

span标签在还没执行点击事件的时候,它里面包含a标签,当点击了按钮之后,执行了innerHTML,span标签里面就只有“hello world”如下:

http://img1.sycdn.imooc.com//climg/5c89b4ca0001cc0a06120378.jpg

所以在代码中,推荐给span标签添加字体加粗。

祝学习愉快~

山河远阔ZZ 2019-03-13 14:18:44

同学你好,代码中有一个问题:

1、在js中,给文字加粗,属性值需要用引号引起来:“bold”,参考下图:

count指的是b标签,在if中,直接给span标签改变了内容,那么给b标签加粗字体的效果就不会实现,可以给span标签实现字体加粗的效果。

http://img1.sycdn.imooc.com//climg/5c889fea0001f52505720054.jpg

自己试一试哦,如果帮助到了你,欢迎采纳。

祝学习愉快!

  • 提问者 Alvin24 #1
    老师 直接给p加粗吗 那整个句子都是加粗的了 我只需要数字加粗
    2019-03-14 09:48:11
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师