为什么留言板加了其他样式和代码就运行不出来了，单独就可以运行。为什么？
问题描述：
单独运行就是这样
加了样式之后就这样了
留言板部分都在每个部分的最后
```html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>新用户注册页面</title>
<link type="text/css" rel="stylesheet" href="register素材/register.css" />
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div id="header"><img src="register素材/images/register_logo.gif" alt="logo"/></div>
<div id="main">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bg bg_top_left"></td>
<td class="bg_top"></td>
<td class="bg bg_top_right"></td>
</tr>
<tr>
<td class="bg_left"></td>
<td class="content">
<form action="" method="post" name="myform" >
<dl>
<dt>用户名：</dt>
<dd><input type="text" id="userName" class="inputs userWidth" onfocus="userNameFocus()" onblur="userNameBlur()" /> @163.com</dd>
<div id="userNameId"></div>
</dl>
<dl>
<dt>邮箱：</dt>
<dd><input type="text" id="email" class="inputs" onfocus="emailFocus()" onBlur="emailBlur()" /></dd>
<div id="emailId"></div>
</dl>
<dl>
<dt>QQ：</dt>
<dd><input type="password" id="repwd" class="inputs" /></dd>
<div id="repwdId"></div>
</dl>
<dl>
<dt>性别：</dt>
<dd><input name="sex" type="radio" value="" checked="checked"/>男 <input name="sex" type="radio" value="" />女 </dd>
</dl>
<dl>
<dt>电话：</dt>
<dd><input type="text" id="nickName" class="inputs" /></dd>
<div id="nickNameId"></div>
</dl>
<dl>
<dt>地址：</dt>
<dd><input type="text" id="email" class="inputs" onfocus="emailFocus" onblur="emailBlur()"/></dd>
<div id=""></div>
</dl>
<dl>
<textarea name="" id="txt" cols="30" rows="10"></textarea>
</dl>
<dl>
<dt></dt>
<dd><button>发布</button><button>取消</button>
<ul></ul></dd>
</dl>
</form>
</td>
<td class="bg_right"></td>
</tr>
<tr>
<td class="bg bg_end_left"></td>
<td class="bg_end"></td>
<td class="bg bg_end_right"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
```javascript
function $(elementId){
return document.getElementById(elementId);
}
function userNameFocus(){
var userNameId=$("userNameId");
userNameId.className="import_prompt";
userNameId.innerHTML="1,字母数字下划线组成<br/>2.只能字母数字开始或结尾，长度4-18";
}
function userNameBlur(){
var userNameId=$("userNameId");
var userName=$("userName");
var reg=/^[0-9a-aA-Z][0-9a-aA-Z.-]{2,16}[0-9a-aA-Z]$/;
if(userName.value==""){
userNameId.className="error_prompt";
userNameId.innerHTML="不能为空";
return false;
}
if(reg.test(userName.value)==false){
userNameId.className="error_prompt";
userNameId.innerHTML="1,字母数字下划线组成<br/>2.只能字母数字开始或结尾，长度4-18";
return false;
}
userNameId.className="import_prompt";
userNameId.innerHTML="用户输入正确";
return true;
}
function emailFocus(){
var emailId=$("emailId");
emailId.className="import_prompt";
emailId.innerHTML="邮箱不能为空，请输入邮箱";
}
function emailBlur(){
var email=$("email");
var emailId=$("emailId");
var reg=/^\w+@1w+(.[a-zA-Z]{2,3}){1,2}$/;
if(email.value==""){
emailId.className="error_prompt";
emailId.innerHTML="邮箱不能为空，请输入邮箱";
return false;
}
if(reg.test(email.value)==false){
emailId.className="error_prompt";
emailId.innerHTML="邮箱格式不正确，请重新输入";
return false;
}
emailId.className="ok_prompt";
emailId.innerHTML="邮箱输入正确";
return true;
}
// 1.点击发布按钮
// 2.点击后获取到文本域中的内容
// 3.创建了一个li标签
// 4.将文字内容添加到创建的li标签中
// 5.将li插入到ul当中
var txt=document.querySelector("#txt")
var btn=document.querySelector("button")
var ul=document.querySelector("ul")
btn.onclick=function(){
var value=txt.value;
if(value==""){
alert("请输入内容")
}else{
var li=document.createElement("li")
li.innerHTML=value+"<a href='javascript:;'>删除</a>";
ul.appendChild(li)
// 获取所有的删除标签
var a=document.querySelectorAll("a")
// 给删除标签绑定事件
for(var i=0;i<a.length;i++){
a[i].onclick=function(){
// 获取删除整个内容标签
var li=this.parentNode;
// 删除内容
ul.removeChild(li)
}
}
}
// 发布内容以后，清空表单中原来的内容
txt.value=""
}
body,dl,dt,dd,div,form {padding:0;margin:0;}
#header,#main{
width:650px;
margin:0 auto;
}
.bg{
background-image:url(../images/register_bg.gif);
background-repeat:no-repeat;
width:6px;
height:6px;
}
.bg_top_left{
background-position:0px 0px;
}
.bg_top_right{
background-position:0px -6px;
}
.bg_end_left{
background-position:0px -12px;
}
.bg_end_right{
background-position:0px -18px;
}
.bg_top{
border-top:solid 1px #666666;
}
.bg_end{
border-bottom:solid 1px #666666;
}
.bg_left{
border-left:solid 1px #666666;
}
.bg_right{
border-right:solid 1px #666666;
}
.content{
padding:10px;
}
.inputs{
border:solid 1px #a4c8e0;
width:150px;
height:15px;
}
.userWidth{
width:110px;
}
.content div{
float:left;
font-size:12px;
color:#000;
}
dl{
clear:both;
}
dt,dd{
float:left;
}
dt{
width:130px;
text-align:right;
font-size:14px;
height:30px;
line-height:25px;
}
dd{
font-size:12px;
color:#666666;
width:180px;
}
/*当鼠标放到文本框时，提示文本的样式*/
.import_prompt{
border:solid 1px #ffcd00;
background-color:#ffffda;
padding-left:5px;
padding-right:5px;
line-height:20px;
}
/*当文本框内容不符合要求时，提示文本的样式*/
.error_prompt{
border:solid 1px #ff3300;
background-color:#fff2e5;
background-image:url(../images/li_err.gif);
background-repeat:no-repeat;
background-position:5px 2px;
padding:2px 5px 0px 25px;
line-height:20px;
}
/*当文本框内容输入正确时，提示文本的样式*/
.ok_prompt{
border:solid 1px #01be00;
background-color:#e6fee4;
background-image:url(../images/li_ok.gif);
background-repeat:no-repeat;
background-position:5px 2px;
padding:2px 5px 0px 25px;
line-height:20px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
list-style: none;
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
li a {
float: right;
text-decoration: none;
}
答
自己f12看下控制台报什么错误。
而且不要发截图，这样别人没法帮你调试。发代码的时候用</>格式化下
答
右键检查，看控制台，有报错