为什么‘姓名填写规则’不会变化
HTML：
<!DOCTYPE html>
<html>
<head>
<title>慕课高铁服务中心</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="header">
<div class="banner">
<div class="logo"><p>慕课高铁客户服务中心 | <span>客户服务</span></p></div>
<div class="text">意见反馈 <span>imooc@com</span> 您好，请 <span>登录</span> | <span>注册</span>
<span class="myImooc">我的IMOOC ▼
<ul class="list">
<li><a href="javascript:;">未完成订单</a></li>
<li><a href="javascript:;">已完成订单（改/退）</a></li>
<li class="li"></li>
<li><a href="javascript:;">我的保险</a></li>
<li class="li"></li>
<li><a href="javascript:;">查看个人信息</a></li>
<li><a href="javascript:;">账户安全</a></li>
<li class="li"></li>
<li><a href="javascript:;">常用联系人</a></li>
<li class="li"></li>
<li><a href="javascript:;">重点旅客预约</a></li>
<li><a href="javascript:;">遗失物品查找</a></li>
<li class="li"></li>
<li><a href="javascript:;">服务查询</a></li>
<li class="li"></li>
<li><a href="javascript:;">投诉</a></li>
<li><a href="javascript:;">建议</a></li>
</ul>
</span>
</div>
<div class="phone"><img src="素材/未标题-1.png"><p>手机版</p></div>
</div><!-- 内容显示部分 -->
</div><!-- header -->
<div class="main">
<div class="section"><!-- 表格输入部分 -->
<div class="section_text">您现在的位置：<span>客运首页 > 注册</span></div>
<div class="table">
<div class="section_table-title">账户信息</div>
<div class="section_table-text">
<div><!-- 用户名板块 -->
<span style="color:red">* </span>
<span>用 户 名：</span>
<input type="text" placeholder="用户名设置成功后不可修改" id="num">
<span class="section_span" id="numoutput"> <!-- 6-30位字母、数字或"_"，字母开头 --></span>
</div>
<div><!-- 登录密码 -->
<span style='color:red'>* </span>
<span>登录密码</span>：
<input type="password" placeholder="6-20位字母、数字或符号" id="password">
<span id="one"></span> <span id="two"></span> <span id="three"></span>
<p id="passwordoutput"></p>
</div>
<div><!-- 确认密码 -->
<span style='color:red'>* </span>
<span>确认密码</span>：
<input type="password" placeholder="再次输入您的登录密码" id="password_">
<span class="section_span" id="password_output"></span>
</div>
<div><!-- 姓名 -->
<span style='color:red'>* </span>
<span>姓名</span>：
<input type="text" placeholder="请输入姓名" id="name">
<!-- <span class="section_span"> -->
<span class="section_span nameRule" id="nameoutput">姓名填写规则</span>
<span class="rule" id="rule">
1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。<br/>2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。<br/>3.姓名中有繁体字无法输入时，可用简体替代。<br/>4.姓名较长，汉字与英文字符合计超过30个（1个汉字算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不区别大小写。
</span>
<!-- </span> -->
</div>
<div><!-- 证件类型 -->
<span style='color:red'>* </span>
<span>证件类型</span>：
<select class="id_type">
<option value="二代身份证" selected>二代身份证</option>
<option value="港澳通行证">港澳通行证</option>
<option value="台湾通行证">台湾通行证</option>
<option value="护照">护照</option>
</select>
<span class="section_span"></span>
</div>
<div><!-- 证件号码 -->
<span style='color:red'>* </span>
<span>证件号码</span>：
<input type="text" placeholder="请输入您的证件号码" id="idnum">
<span class="section_span" id="idnumoutput"></span>
</div>
<div><!-- 邮箱 -->
<span></span>
<span>邮箱</span>：
<input type="text" placeholder="请正确填写邮箱地址" id="email">
<span class="section_span" id="emailoutput"></span>
</div>
<div><!-- 手机号码 -->
<span style='color:red'>* </span>
<span>手机号码</span>：
<input type="text" placeholder="请输入您的手机号码" id="telnum">
<span class="section_span" id="telnumoutput"><!-- 请正确填写手机号码，稍后将向该号码发送短信验证码 -->
</span>
</div>
<div><!-- 旅客类型 -->
<span style='color:red'>* </span>
<span>旅客类型</span>：
<select class="travellerType">
<option value="成人" selected>成人</option>
<option value="儿童">儿童</option>
<option value="学生">学生</option>
<option value="残疾军人">残疾军人</option>
<option value="伤残人民警察">伤残人民警察</option>
</select>
<!-- <span class="section_span"></span> -->
</div>
<div><!-- 我已阅读 -->
<input type="checkbox" id="choose"> 我已阅读并同意遵守规定<a href="javascript:;">《中国铁路客户服务中心网站条款》</a>
<button id="handup">下一步</button>
</div>
</div>
</div>
</div>
</div><!-- 中间主体 -->
<div class="footer">
<p>关于我们 | 网站声明</p>
<p>Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
</div><!-- footer -->
<script type="text/javascript" src="js.js"></script>
</body>
</html>
CSS:
<!DOCTYPE html>
<html>
<head>
<title>慕课高铁服务中心</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="header">
<div class="banner">
<div class="logo"><p>慕课高铁客户服务中心 | <span>客户服务</span></p></div>
<div class="text">意见反馈 <span>imooc@com</span> 您好，请 <span>登录</span> | <span>注册</span>
<span class="myImooc">我的IMOOC ▼
<ul class="list">
<li><a href="javascript:;">未完成订单</a></li>
<li><a href="javascript:;">已完成订单（改/退）</a></li>
<li class="li"></li>
<li><a href="javascript:;">我的保险</a></li>
<li class="li"></li>
<li><a href="javascript:;">查看个人信息</a></li>
<li><a href="javascript:;">账户安全</a></li>
<li class="li"></li>
<li><a href="javascript:;">常用联系人</a></li>
<li class="li"></li>
<li><a href="javascript:;">重点旅客预约</a></li>
<li><a href="javascript:;">遗失物品查找</a></li>
<li class="li"></li>
<li><a href="javascript:;">服务查询</a></li>
<li class="li"></li>
<li><a href="javascript:;">投诉</a></li>
<li><a href="javascript:;">建议</a></li>
</ul>
</span>
</div>
<div class="phone"><img src="素材/未标题-1.png"><p>手机版</p></div>
</div><!-- 内容显示部分 -->
</div><!-- header -->
<div class="main">
<div class="section"><!-- 表格输入部分 -->
<div class="section_text">您现在的位置：<span>客运首页 > 注册</span></div>
<div class="table">
<div class="section_table-title">账户信息</div>
<div class="section_table-text">
<div><!-- 用户名板块 -->
<span style="color:red">* </span>
<span>用 户 名：</span>
<input type="text" placeholder="用户名设置成功后不可修改" id="num">
<span class="section_span" id="numoutput"> <!-- 6-30位字母、数字或"_"，字母开头 --></span>
</div>
<div><!-- 登录密码 -->
<span style='color:red'>* </span>
<span>登录密码</span>：
<input type="password" placeholder="6-20位字母、数字或符号" id="password">
<span id="one"></span> <span id="two"></span> <span id="three"></span>
<p id="passwordoutput"></p>
</div>
<div><!-- 确认密码 -->
<span style='color:red'>* </span>
<span>确认密码</span>：
<input type="password" placeholder="再次输入您的登录密码" id="password_">
<span class="section_span" id="password_output"></span>
</div>
<div><!-- 姓名 -->
<span style='color:red'>* </span>
<span>姓名</span>：
<input type="text" placeholder="请输入姓名" id="name">
<!-- <span class="section_span"> -->
<span class="section_span nameRule" id="nameoutput">姓名填写规则</span>
<span class="rule" id="rule">
1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。<br/>2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。<br/>3.姓名中有繁体字无法输入时，可用简体替代。<br/>4.姓名较长，汉字与英文字符合计超过30个（1个汉字算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不区别大小写。
</span>
<!-- </span> -->
</div>
<div><!-- 证件类型 -->
<span style='color:red'>* </span>
<span>证件类型</span>：
<select class="id_type">
<option value="二代身份证" selected>二代身份证</option>
<option value="港澳通行证">港澳通行证</option>
<option value="台湾通行证">台湾通行证</option>
<option value="护照">护照</option>
</select>
<span class="section_span"></span>
</div>
<div><!-- 证件号码 -->
<span style='color:red'>* </span>
<span>证件号码</span>：
<input type="text" placeholder="请输入您的证件号码" id="idnum">
<span class="section_span" id="idnumoutput"></span>
</div>
<div><!-- 邮箱 -->
<span></span>
<span>邮箱</span>：
<input type="text" placeholder="请正确填写邮箱地址" id="email">
<span class="section_span" id="emailoutput"></span>
</div>
<div><!-- 手机号码 -->
<span style='color:red'>* </span>
<span>手机号码</span>：
<input type="text" placeholder="请输入您的手机号码" id="telnum">
<span class="section_span" id="telnumoutput"><!-- 请正确填写手机号码，稍后将向该号码发送短信验证码 -->
</span>
</div>
<div><!-- 旅客类型 -->
<span style='color:red'>* </span>
<span>旅客类型</span>：
<select class="travellerType">
<option value="成人" selected>成人</option>
<option value="儿童">儿童</option>
<option value="学生">学生</option>
<option value="残疾军人">残疾军人</option>
<option value="伤残人民警察">伤残人民警察</option>
</select>
<!-- <span class="section_span"></span> -->
</div>
<div><!-- 我已阅读 -->
<input type="checkbox" id="choose"> 我已阅读并同意遵守规定<a href="javascript:;">《中国铁路客户服务中心网站条款》</a>
<button id="handup">下一步</button>
</div>
</div>
</div>
</div>
</div><!-- 中间主体 -->
<div class="footer">
<p>关于我们 | 网站声明</p>
<p>Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
</div><!-- footer -->
<script type="text/javascript" src="js.js"></script>
</body>
</html>
JS：
<!DOCTYPE html>
<html>
<head>
<title>慕课高铁服务中心</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="header">
<div class="banner">
<div class="logo"><p>慕课高铁客户服务中心 | <span>客户服务</span></p></div>
<div class="text">意见反馈 <span>imooc@com</span> 您好，请 <span>登录</span> | <span>注册</span>
<span class="myImooc">我的IMOOC ▼
<ul class="list">
<li><a href="javascript:;">未完成订单</a></li>
<li><a href="javascript:;">已完成订单（改/退）</a></li>
<li class="li"></li>
<li><a href="javascript:;">我的保险</a></li>
<li class="li"></li>
<li><a href="javascript:;">查看个人信息</a></li>
<li><a href="javascript:;">账户安全</a></li>
<li class="li"></li>
<li><a href="javascript:;">常用联系人</a></li>
<li class="li"></li>
<li><a href="javascript:;">重点旅客预约</a></li>
<li><a href="javascript:;">遗失物品查找</a></li>
<li class="li"></li>
<li><a href="javascript:;">服务查询</a></li>
<li class="li"></li>
<li><a href="javascript:;">投诉</a></li>
<li><a href="javascript:;">建议</a></li>
</ul>
</span>
</div>
<div class="phone"><img src="素材/未标题-1.png"><p>手机版</p></div>
</div><!-- 内容显示部分 -->
</div><!-- header -->
<div class="main">
<div class="section"><!-- 表格输入部分 -->
<div class="section_text">您现在的位置：<span>客运首页 > 注册</span></div>
<div class="table">
<div class="section_table-title">账户信息</div>
<div class="section_table-text">
<div><!-- 用户名板块 -->
<span style="color:red">* </span>
<span>用 户 名：</span>
<input type="text" placeholder="用户名设置成功后不可修改" id="num">
<span class="section_span" id="numoutput"> <!-- 6-30位字母、数字或"_"，字母开头 --></span>
</div>
<div><!-- 登录密码 -->
<span style='color:red'>* </span>
<span>登录密码</span>：
<input type="password" placeholder="6-20位字母、数字或符号" id="password">
<span id="one"></span> <span id="two"></span> <span id="three"></span>
<p id="passwordoutput"></p>
</div>
<div><!-- 确认密码 -->
<span style='color:red'>* </span>
<span>确认密码</span>：
<input type="password" placeholder="再次输入您的登录密码" id="password_">
<span class="section_span" id="password_output"></span>
</div>
<div><!-- 姓名 -->
<span style='color:red'>* </span>
<span>姓名</span>：
<input type="text" placeholder="请输入姓名" id="name">
<!-- <span class="section_span"> -->
<span class="section_span nameRule" id="nameoutput">姓名填写规则</span>
<span class="rule" id="rule">
1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。<br/>2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。<br/>3.姓名中有繁体字无法输入时，可用简体替代。<br/>4.姓名较长，汉字与英文字符合计超过30个（1个汉字算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不区别大小写。
</span>
<!-- </span> -->
</div>
<div><!-- 证件类型 -->
<span style='color:red'>* </span>
<span>证件类型</span>：
<select class="id_type">
<option value="二代身份证" selected>二代身份证</option>
<option value="港澳通行证">港澳通行证</option>
<option value="台湾通行证">台湾通行证</option>
<option value="护照">护照</option>
</select>
<span class="section_span"></span>
</div>
<div><!-- 证件号码 -->
<span style='color:red'>* </span>
<span>证件号码</span>：
<input type="text" placeholder="请输入您的证件号码" id="idnum">
<span class="section_span" id="idnumoutput"></span>
</div>
<div><!-- 邮箱 -->
<span></span>
<span>邮箱</span>：
<input type="text" placeholder="请正确填写邮箱地址" id="email">
<span class="section_span" id="emailoutput"></span>
</div>
<div><!-- 手机号码 -->
<span style='color:red'>* </span>
<span>手机号码</span>：
<input type="text" placeholder="请输入您的手机号码" id="telnum">
<span class="section_span" id="telnumoutput"><!-- 请正确填写手机号码，稍后将向该号码发送短信验证码 -->
</span>
</div>
<div><!-- 旅客类型 -->
<span style='color:red'>* </span>
<span>旅客类型</span>：
<select class="travellerType">
<option value="成人" selected>成人</option>
<option value="儿童">儿童</option>
<option value="学生">学生</option>
<option value="残疾军人">残疾军人</option>
<option value="伤残人民警察">伤残人民警察</option>
</select>
<!-- <span class="section_span"></span> -->
</div>
<div><!-- 我已阅读 -->
<input type="checkbox" id="choose"> 我已阅读并同意遵守规定<a href="javascript:;">《中国铁路客户服务中心网站条款》</a>
<button id="handup">下一步</button>
</div>
</div>
</div>
</div>
</div><!-- 中间主体 -->
<div class="footer">
<p>关于我们 | 网站声明</p>
<p>Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
</div><!-- footer -->
<script type="text/javascript" src="js.js"></script>
</body>
</html>
提问：姓名输入板块后面的‘姓名填写规则’几个字为什么不会随着JS的变化而变化
正在回答
同学你好，上传的3段代码都是html文件，请同学重新把css,js都粘贴到问答区，以便老师定位问题。
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星