都不出来~~~好难过呀~~哪的问题呀

来源:9-4 区别getElementByID,getElementsByName,getElementsByTagName

慕粉3491582

2018-09-18 10:58

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>无标题文档</title>
    </head>
   
    <body>
        <form>
          请选择你爱好:<br>
          <input type="checkbox" name="hobby" id="hobby1">  音乐
          <input type="checkbox" name="hobby" id="hobby2">  登山
          <input type="checkbox" name="hobby" id="hobby3">  游泳
          <input type="checkbox" name="hobby" id="hobby4">  阅读
          <input type="checkbox" name="hobby" id="hobby5">  打球
          <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>
          <input type="button" value = "全选" onclick = "checkall();">
          <input type="button" value = "全不选" onclick = "clearall();">
          <p>请输入您要选择爱好的序号,序号为1-6:</p>
          <input id="wb" name="wb" type="text" >
          <input name="ok" type="button" value="确定" onclick = "checkone();">
        </form>
        <script type="text/javascript">
         function checkall(){
            var hobby = document.getElementsByTagName("input");
            for(var i=0;i<hobby.length;i++){
                    if(hobby[i].type=="checkbox"){
                    hobby[i].checked=true;  
                    }              
                }
            }
        function clearall(){
            var hobby = document.getElementsByName("hobby");
           
         // 任务2   
         for(var i=0;i<hobby.length;i++){
             hobby[i].checked=false;
         }
           
        }
       
        function checkone(){
            var j=document.getElementById("wb").value;
       
         // 任务3
         if(j>0&&j<=6)
         document.getElementById("hobby"+j).checked=true;
        }
        else alert("请输入1-6的值");
       
        </script>
    </body>
</html>



写回答 关注

2回答

  • 慕虎144582
    2018-09-27 16:08:51
    已采纳

    上面的是我写的  ,

    下面这段是我给你改完bug的  你有些符号比如括号没写全

    <!-- <!DOCTYPE html>

    <html>

    <meta charset="UTF-8">

    <head></head>

    <body>

    <form id="form2">

    <input type="checkbox" name="test1" value="1"/><span>1</span>

    <input type="checkbox" name="test1" value="2"/><span>2</span>

    <input type="checkbox" name="test1" value="3"/><span>3</span>

    <input type="checkbox" name="test1" value="4"/><span>4</span>

    <input type="checkbox" name="test1" value="5"/><span>5</span>

    <input type='button' value='提交' onclick="show()"/>

    <span>haha</span>

    </form>

    <script type="text/javascript">

    var show  = function(){

    setTimeout("alert(111)",3000)

    }

    show();

    var obj = document.querySelectorAll("input[name]");

    console.log(obj);

    </script>

    </body>

    </html> -->

    <!-- <!Doctype html>

    <html>

    <meta charset="UTF-8">

        <body>

            <span id="js_onclick">点击</span>

            <span id="js_onmouseover">鼠标经过</span>

            <span id="js_onmouseout">鼠标移开</span>

            <span id="js_onchange">文本框内容改变</span>

            <span id="js_onfocus">光标聚焦</span>

        </body>

        

        <script type="text/javascript">

            var js_onclick = document.getElementById("js_onclick");

            var js_onmouseover = document.getElementById("js_onmouseover");

            var js_onmouseout = document.getElementById("js_onmouseout");

            var js_onchange = document.getElementById("js_onchange");

            var js_onfocus = document.getElementById("js_onfocus");

            js_onclick.onclick = function(){

    alert('点击');

    };

    js_onmouseover.onmouseover = function(){

    alert('鼠标经过');

    }

    js_onmouseout.onmouseout = function(){

    alert('鼠标移开');

    }

    js_onfocus.onfocus = function(){

    alert('光标聚焦');

    }

        </script>

    </html> -->

    <!-- <!DOCTYPE html>

    <html>

     <head>

      <title> 事件</title>  

      <meta charset="UTF-8">

     </head> 

     <body>

       <input type='text' id='txt1' /> 

       <select id='select'>

    <option value='+'>+</option>

    <option value="-">-</option>

    <option value="*">*</option>

    <option value="/">/</option>

       </select>

       <input type='text' id='txt2' /> 

       <input type='button' value=' = ' onclick="count();" /> 

       <input type='text' id='fruit' />   

     </body>

      <script type="text/javascript">

       function count(){

           

        //获取第一个输入框的值

        var txt1 = document.getElementById('txt1').value;

        var txt2 = document.getElementById('txt2').value;

    //获取第二个输入框的值

    //获取选择框的值

    var select = document.getElementById("select");

    var index = select.selectedIndex;

    var select_val = select.options[index].value

    alert(txt1);

    //获取通过下拉框来选择的值来改变加减乘除的运算法则

        //设置结果输入框的值 

        

       }

      </script>  

    </html> -->

    <!-- <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>计时器</title>

    <script type="text/javascript">

    var interval;

        function clock1(){      

        interval = setInterval(function(){

    var time=new Date();

    document.getElementById("clock").value = time;   

      },1000);

        }

       

    </script>

    </head>

    <body  onload="clock1()" >

      <form>

        <input type="text" id="clock" size="50"  />

         <input type="button" value="start" onclick="clock1()" />   

        <input type="button" value="Stop" onclick="clearInterval(interval)" />

      </form>

    </body>

    </html> -->

    <!-- <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>计时器</title>


    <script type="text/javascript">

      var num=0;

      var i;

      function startCount(){

        document.getElementById('count').value=num;

        num=num+1;

        i=setTimeout("startCount()",1000);

      }

      function stopCount(){

        clearTimeout(i);

      }

    </script>

    </head>

    <body>

      <form>

        <input type="text" id="count" />

        <input type="button" value="Start"  onclick="startCount()"/>

        <input type="button" value="Stop" onclick="stopCount()"   />

      </form>

    </body>

    </html> -->

    <!-- <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>无标题文档</title>

    <script type="text/javascript">

            function GoBack() {

                window.history.back(-1);

            }

           

    </script>

    </head>

     


    <body>

    点击下面的锚点链接,添加历史列表项:

        

        <br />

        <a href="#target1">第一个锚点</a>

        <a name="target1"></a>

        <br />

        <a href="#target2">第二个锚点</a>

        <a name="target2"></a>

        <br /><br />

        使用下面按钮,实现返回前一个页面:

        <form>

           <input type="button"  value="返回前一个页面" onclick="GoBack();" />        

        </form>

    </body>

    </html> -->

    <!-- <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>无标题文档</title>

    <script type="text/javascript">

            function GoForward() {

                window.history.forward();

            }

    </script>

    </head>

     


    <body>

    点击下面的锚点链接,添加历史列表项:    

        <br />

        <a href="#target1">第一个锚点</a>

        <a name="target1"></a>

        <br />

        <a href="#target2">第二个锚点</a>

        <a name="target2"></a>

        <br /><br />

        使用下面按钮,实现返回下一个页面:

        <form>

           <input type="button"  value="返回下一个页面" onclick="GoForward()" />        

        </form>

    </body>

    </html> -->

    <!-- <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>navigator</title>

    <script type="text/javascript">

      function validB(){ 

        var u_agent = navigator.userAgent;

        var B_name="不是想用的主流浏览器!"; 

        if(u_agent.indexOf("Firefox")>-1){ 

            B_name="Firefox"; 

        }else if(u_agent.indexOf("Chrome")>-1){ 

            B_name="Chrome"; 

        }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ 

            B_name="IE(8-10)";  

        }

            document.write("浏览器:"+B_name+"<br>");

            document.write("u_agent:"+u_agent+"<br>"); 

      } 

    </script>

    </head>

    <body>

      <form>

         <input type="button" value="查看浏览器" onclick="validB()"  >

      </form>

    </body>

    </html> -->

    <!-- <!DOCTYPE html>

    <html>

     <head>

      <title>浏览器对象</title>  

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   

     </head>

     <body>  

     <span id="time">5</span>秒后返回主页<a href="https://baidu.com" target="_blank">返回</a>

     

      <script type="text/javascript">  

        var start = 5;

        var time = document.getElementById("time");

        setInterval(function(){

            time.innerHTML = start-1;

    start--;

    if(start<1){

    window.location.href="https://baidu.com";

    }

        },1000);

     </script> 

    </body>

    </html> -->

    <!-- <!DOCTYPE HTML>

    <html>  

    <head>  

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  

    <title>JavaScript</title>  

    </head>  

    <body>  

        

            <form name="Input">

                <table align="center" width="500px" height="50%" border="1">

                    <tr>

                        <td align="center" width="100px">

                            学号:

                        </td>

                        <td align="center" width="300px">

                            <input type="text" id=userid name="user" onblur="validate();">

                            <div id=usermsg></div>

                        </td>

                    </tr>

                    <tr>

                        <td align="center" width="100px">

                            姓名:

                        </td>

                            <td align="center">

                            <input type="text" name="name">

                        </td>

                    </tr>

                    <tr>

                        <td align="center" width="%45">

                            性别:

                        </td>

                        <td align="center">

                            <input type="radio" name="sex" value="男">

                            男

                            <input type="radio" name="sex" value="女">

                            女

                        </td>

                    </tr>

                    <tr>

                        <td align="center" width="30%">

                            年龄:

                        </td>

                        <td align="center" width="300px">

                            <input type="text" name="age">

                        </td>

                    </tr>

                    <tr>

                        <td align="center" width="100px">

                            地址:

                        </td>

                        <td align="center" width="300px">

                            <input type="text" name="addr">

                        </td>

                    </tr>


                </table>

            </form>

            <h1 id="myHead" onclick="getValue()">

                看看三种获取节点的方法?

            </h1>

            <p>

                点击标题弹出它的值。

            </p>

            <input type="button" onclick="getElements()"

                value="看看name为sex的节点有几个?" />

            <Br>

            <input type="button" onclick="getTagElements()"

                value="看看标签名为input的节点有几个?" />

                

         <script type="text/javascript">

             function getValue()

              {

                  var myH = document.getElementById("myHead");

                  alert(myH.innerHTML)

              }

              function getElements()

              {

                 var myS = document.getElementsByName("sex");

                  alert(myS.length);

              }


              function getTagElements()

              {

                  var myI = document.getElementsByTagName("input");

                  alert(myI.length);

              }

             

         </script>        


        </body>

    </html> -->

    <!-- <!DOCTYPE HTML>

    <html>

        <head>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

            <title>无标题文档</title>

        </head>

        

        <body>

            <form>

              请选择你爱好:<br>

              <input type="checkbox" name="hobby" id="hobby1">  音乐

              <input type="checkbox" name="hobby" id="hobby2">  登山

              <input type="checkbox" name="hobby" id="hobby3">  游泳

              <input type="checkbox" name="hobby" id="hobby4">  阅读

              <input type="checkbox" name="hobby" id="hobby5">  打球

              <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>

              <input type="button" value = "全选" onclick = "checkall();">

              <input type="button" value = "全不选" onclick = "clearall();">

              <p>请输入您要选择爱好的序号,序号为1-6:</p>

              <input id="wb" name="wb" type="text" >

              <input name="ok" type="button" value="确定" onclick = "checkone();">

            </form>

            <script type="text/javascript">

            function checkall(){

                var hobby = document.getElementsByTagName("input");

                for(key in hobby)

               hobby[key].checked = true

              // 任务1 

               

            }

            function clearall(){

                var hobby = document.getElementsByName("hobby");

                            for(key in hobby)

               hobby[key].checked = false

                

             // 任务2    

                

            }

            

            function checkone(){

                var j=document.getElementById("wb").value;

            var hobby = document.getElementsByTagName("input");

            

            hobby[j-1].checked = true;

             // 任务3

            

            }

            

            </script>

        </body>

    </html> -->

    <!DOCTYPE HTML>

    <html>

        <head>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

            <title>无标题文档</title>

        </head>

        

        <body>

            <form>

              请选择你爱好:<br>

              <input type="checkbox" name="hobby" id="hobby1">  音乐

              <input type="checkbox" name="hobby" id="hobby2">  登山

              <input type="checkbox" name="hobby" id="hobby3">  游泳

              <input type="checkbox" name="hobby" id="hobby4">  阅读

              <input type="checkbox" name="hobby" id="hobby5">  打球

              <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>

              <input type="button" value = "全选" onclick = "checkall();">

              <input type="button" value = "全不选" onclick = "clearall();">

              <p>请输入您要选择爱好的序号,序号为1-6:</p>

              <input id="wb" name="wb" type="text" >

              <input name="ok" type="button" value="确定" onclick = "checkone();">

            </form>

            <script type="text/javascript">

             function checkall(){

                var hobby = document.getElementsByTagName("input");

                for(var i=0;i<hobby.length;i++){

                        if(hobby[i].type=="checkbox"){

                        hobby[i].checked=true;   

                        }               

                    }

                }

            function clearall(){

                var hobby = document.getElementsByName("hobby");

                

             // 任务2    

             for(var i=0;i<hobby.length;i++){

                 hobby[i].checked=false;

             }

                

            }

            

            function checkone(){

                var j=document.getElementById("wb").value;

            

             // 任务3

             if(j>0&&j<=6){ 

             document.getElementById("hobby"+j).checked=true;

            }

            else {alert("请输入1-6的值")};

            }

            </script>

        </body>

    </html>


  • 慕虎144582
    2018-09-27 16:06:12

    <!DOCTYPE HTML>

    <html>

        <head>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

            <title>无标题文档</title>

        </head>

        

        <body>

            <form>

              请选择你爱好:<br>

              <input type="checkbox" name="hobby" id="hobby1">  音乐

              <input type="checkbox" name="hobby" id="hobby2">  登山

              <input type="checkbox" name="hobby" id="hobby3">  游泳

              <input type="checkbox" name="hobby" id="hobby4">  阅读

              <input type="checkbox" name="hobby" id="hobby5">  打球

              <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>

              <input type="button" value = "全选" onclick = "checkall();">

              <input type="button" value = "全不选" onclick = "clearall();">

              <p>请输入您要选择爱好的序号,序号为1-6:</p>

              <input id="wb" name="wb" type="text" >

              <input name="ok" type="button" value="确定" onclick = "checkone();">

            </form>

            <script type="text/javascript">

            function checkall(){

                var hobby = document.getElementsByTagName("input");

                for(key in hobby)

               hobby[key].checked = true

              // 任务1 

               

            }

            function clearall(){

                var hobby = document.getElementsByName("hobby");

                            for(key in hobby)

               hobby[key].checked = false

                

             // 任务2    

                

            }

            

            function checkone(){

                var j=document.getElementById("wb").value;

            var hobby = document.getElementsByTagName("input");

            

            hobby[j-1].checked = true;

             // 任务3

            

            }

            

            </script>

        </body>

    </html>


JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468276 学习 · 21892 问题

查看课程

相似问题