六天学习问题总结

最新推荐文章于 2024-07-15 13:17:25 发布

protoJ

最新推荐文章于 2024-07-15 13:17:25 发布

阅读量266

点赞数

分类专栏： summerwork 文章标签： html js

本文链接：https://blog.csdn.net/protoJ/article/details/52190648

版权

summerwork 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近写代码时遇到的一些问题总结

1. input与button不够了解导致出现jsDOM操作出现闪现闪无

没修改之前的html代码

<form id="excel">
  <div class="dd">时间：<input id="time"/></div>
  <div class="dd">事件：<input id="title"/></div>
<div class="dd">内容：<input class="title1"/></div>
<button  class='className' id="save">保存</button>
<button  class='className' type="reset" id="clear">清除</button>
</form>

修改后的html代码

<form id="excel">
        <div class="dd">时间：<input id="time"/></div>
        <div class="dd">事件：<input id="title"/></div>
        <div class="dd">内容：<input class="title1"/></div>
        <input type="button" class='className' id="save" value="保存">
        <button  class='className' type="reset" id="clear">清除</button>
    </form>

js代码

var save=document.getElementById("save");
    save.onclick=function () {
        var time=document.getElementById("time");
        var title=document.getElementById("title");
        var time_txt=time.value;
        var title_txt=title.value;
        if(time.value.length==0) {
            alert("时间不能为空！");
            time.style.border="1px solid red";//时间框变红
        }else{
            if(title.value.length==0) {
                alert("题目不能为空！");
                title.style.border="1px solid red";//题目框变红
            } else{
                time.style.border="1px solid #3c82c0";//时间框恢复
                title.style.border="1px solid #3c82c0";//题目框恢复

                var tbody=document.getElementById("list").lastChild;//获取table
                var new_tr=document.createElement("tr");//创建tr

                //获取时间
                var new_td1=document.createElement("td");
                new_td1.innerText=time_txt;
                new_tr.appendChild(new_td1);

                //获取题目
                var new_td2=document.createElement("td");
                new_td2.innerText=title_txt;
                new_tr.appendChild(new_td2);
                tbody.appendChild(new_tr);
            }
        }
    };

-原因分析

button标签放到了form标签中，点击这个button变成了提交，相当于<input type="submit"/> 这样就相当于把内容提交，因此才会出现闪现闪无

关于button与input的区别

<button>和<input>
规范中指名：可以用<button>和<input>来做表单按扭。不同的按钮类型请参考这些元素的详细定义。要注意的是<button>比<input>支持更丰富的表现功能。
- 在button元素内部，您可以放置内容，比如文本或图像。这是该元素与使用input元素创建的按钮之间的不同之处。
- <button>与</button>标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。始终为按钮规定type属性。
<input>用法：<input type="submit" value="OK" />，
<button>用法：<button>清除</button>

注意事项

在使用<button>标签时很容易想当然的当成<input type="button">使用，这很容易产生以下几点错误用法：

通过$(‘#customBtn’).val()获取<button id="customBtn"value="test">按钮</button>value的值
在IE(IE内核)下这样用到得的是值是“按钮”，而不是“test”，非IE下得到的是“test”。参加上面标红的第一句话。
这一点要和<input type="button">区分开。
通过这两种方式 $(‘#customBtn’).val() ， $(‘#customBtn’).attr(‘value’)在不同浏览器的获得值，如下：

Browser/Value $(‘#customBtn’).val() $(‘#customBtn’).attr(‘value’)
Firefox13.0 test test
Chrome15.0 test test
Opera11.61 test test
Safari5.1.4 test test
IE9.0 按钮按钮

2.把<button>标签放到了<form>标签中，点击这个button变成了提交，相当于<input type="submit"/>,因此，不要把<button>标签当成<form>中的input元素。这个就是我出现这个问题的原因

以上总结有参考http://www.cnblogs.com/purediy/archive/2012/06/10/2544184.html

2. onclick属性使用时的对象应为元素节点

HTML 元素

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

DOM 节点

文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点

所以，一切 <input />之类的标签都不是元素或节点。

3. js操作弹出层效果弹出层内的onclick操作提示 Uncaught TypeError: Cannot set property ‘onclick’ of null

当出现以下错误：”……is not defined”、”Uncaught TypeError: Cannot set property ‘innerHTML’ of null”、”document.getElementById(“Clock”) is null” 时，说明出现问题的原因是一样的——js文件中调用了html中的对象，并且js在这个调用的对象之前加载了。

一般的解决方法是把js写在window.οnlοad=function（）{}内,加载完HTML后再加载js

原来的js代码

    function openNew(){
//获取页面的高度和宽度
var sWidth=document.documentElement.scrollWidth;
var sHeight=document.documentElement.scrollHeight;

//获取页面的可视区域高度和宽度
var wHeight=document.documentElement.clientHeight; // 获取页面可视区域的高度
var wWidth=document.documentElement.clientWidth;

var oLogin=document.createElement("div");
oLogin.id="log_in";
var mask=document.createElement("div");
mask.id="mask";
oLogin.innerHTML="<div class='panel panel-primary'><div class='panel-heading'><div class='panel-title'>login</div></div><div class='panel-body'><div class='row'><div class='col-md-12'><form class='form-horizontal' role='form' ><div class='form-group'><label  class='col-md-2 control-label'>账户</label><div class='col-md-9'><input id='name' class='form-control' ></div></div><div class='form-group'><label  class='col-md-2 control-label'>密码</label><div class='col-md-9'><input type='password' class='form-control' id='psw'></div></div><div class='form-group'><div class='col-md-offset-2 col-md-10'></div></div><div class='form-group'><div class='col-md-offset-3 col-md-9'><a class='btn btn-default' id='lin'>登录</a><button class='btn btn-default col-md-offset-3' id='sl'>取消</button></div></div></form></div></div></div></div>";
document.body.appendChild(oLogin);//插入创建的登陆框
document.body.appendChild(mask);

//获取登陆框的宽和高
var dHeight= oLogin.offsetHeight  ;   // 获取登陆框的高度
var dWidth= oLogin.offsetWidth;  // 获取登陆框的宽度
//设置登陆框的left和top
oLogin.style.left=wWidth/2-dWidth/2+"px";
oLogin.style.top= wHeight/2-dHeight/2+"px";  //设置登陆框top值
//设置mask的长宽
mask.style.width=sWidth+"px";
mask.style.height=sHeight+"px";
var sl=document.getElementById("sl");
sl.onclick=mask.onclick=function()
{
document.body.removeChild(oLogin);
document.body.removeChild(mask);
};
}
> function Login（）{

var login=document.getElementById("lin");
//点击登录页面内的登录
login.onclick=function()
{
var name=document.getElementById("name").value;
var psw=document.getElementById("psw").value;
var re1=/^[\u4e00-\u9fa5]{2}$/;
var re2=/^[\d\w]{6,12}$/;
if (!re1.test(name)){
alert("账户必须大于或等于两个汉字！")
}
if (!re2.test(psw)){
alert("密码必须六位以上且只能是数字字母下划线！")
}
else if( re1.test(name)&&re2.test(psw)){
document.body.removeChild(oLogin);
document.body.removeChild(mask);
}
};
}

修改后的js代码

function openNew(){
//获取页面的高度和宽度
var sWidth=document.documentElement.scrollWidth;
var sHeight=document.documentElement.scrollHeight;

//获取页面的可视区域高度和宽度
var wHeight=document.documentElement.clientHeight;     // 获取页面可视区域的高度
var wWidth=document.documentElement.clientWidth;

var oLogin=document.createElement("div");
oLogin.id="log_in";
var mask=document.createElement("div");
mask.id="mask";
oLogin.innerHTML="<div class='panel panel-primary'><div class='panel-heading'><div class='panel-title'>login</div></div><div class='panel-body'><div class='row'><div class='col-md-12'><form class='form-horizontal' role='form' ><div class='form-group'><label  class='col-md-2 control-label'>账户</label><div class='col-md-9'><input id='name' class='form-control' ></div></div><div class='form-group'><label  class='col-md-2 control-label'>密码</label><div class='col-md-9'><input type='password' class='form-control' id='psw'></div></div><div class='form-group'><div class='col-md-offset-2 col-md-10'></div></div><div class='form-group'><div class='col-md-offset-3 col-md-9'><a class='btn btn-default' id='lin'>登录</a><button class='btn btn-default col-md-offset-3' id='sl'>取消</button></div></div></form></div></div></div></div>";
document.body.appendChild(oLogin);//插入创建的登陆框
document.body.appendChild(mask);

//获取登陆框的宽和高
var dHeight= oLogin.offsetHeight  ;   // 获取登陆框的高度
var dWidth= oLogin.offsetWidth;      // 获取登陆框的宽度
//设置登陆框的left和top
oLogin.style.left=wWidth/2-dWidth/2+"px";
oLogin.style.top= wHeight/2-dHeight/2+"px";  //设置登陆框top值
//设置mask的长宽
mask.style.width=sWidth+"px";
mask.style.height=sHeight+"px";
var sl=document.getElementById("sl");
sl.onclick=mask.onclick=function()
{
    document.body.removeChild(oLogin);
    document.body.removeChild(mask);
};

> var login=document.getElementById("lin");

//点击登录页面内的登录
login.onclick=function()
{
var name=document.getElementById("name").value;
var psw=document.getElementById("psw").value;
var re1=/^[\u4e00-\u9fa5]{2}$/;
var re2=/^[\d\w]{6,12}$/;
if (!re1.test(name)){
alert("账户必须大于或等于两个汉字！")
}
if (!re2.test(psw)){
alert("密码必须六位以上且只能是数字字母下划线！")
}
else if( re1.test(name)&&re2.test(psw)){
document.body.removeChild(oLogin);
document.body.removeChild(mask);
}
};
}

以上引用部分是不一样的，弹出层内的事件或操作应该与弹出层的js写在一起，只有这样下面的函数调用弹出层的html时，才能找到对象，否则js时间或属性会提示Uncaught TypeError: Cannot set property ‘onclick’ of null

以上就是近期的心得总结