有谁帮我看看哪里出错了,为什么点击按钮没有反映呢?

来源:4-1 编程挑战

shuang_shuang

2016-11-30 16:24

  <!--当点击相应按钮,执行相应操作,为按钮添加相应事件-->
    <input type="button" value="改变颜色"  onclick="changeColor()"> 
    <input type="button" value="改变宽高"  onclick="changeWidth()">
    <input type="button" value="隐藏内容"  onclick="changeHidden()">
    <input type="button" value="显示内容"  onclick="changeDisplay()">
    <input type="button" value="取消设置"  onclick="changeSet()">
  </form>
  <script type="text/javascript">
//定义"改变颜色"的函数
function changeColor(){
    var obj=document.getElementById("txt");
    obj.style.color="red";
    obj.style.backgroundColor="#ccc";
}

//定义"改变宽高"的函数

function changeWidth(){
    var obj=document.getElementById("txt");
    obj.style.width="200px";
    obj.style.height="300px";
}

//定义"隐藏内容"的函数
function changeHidden(){
    var obj=document.getElementById("txt");
    obj.style.display="none";
}


//定义"显示内容"的函数
function changeDisplay(){
    var obj=document.getElementById("txt");
    obj.style.display="block";
}


//定义"取消设置"的函数
function changeSet(){
    var obj=document.getElementById("txt");
    var con=confirm("是否确定取消设置");
    if(con==true){
        obj.removeAttribute('style');
    }else{
       document.write("您取消了设置"); |
   }

写回答 关注

8回答

  • shuang_shuang
    2016-12-02 15:27:11

    各位小伙伴,我终于找到错误所在了,是最后一个大括号打成了中文下的,已经找到并解决了,初学者还是得注意这一点。

  • 慕少7407973
    2016-12-02 00:11:16

    在浏览器按F12看哪里错了 。。不过我想问定义这么多obj可不可以(也是菜鸟)

  • 队长给我球
    2016-12-01 11:48:38
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
    <title>javascript</title>
    <style type="text/css">
    body{font-size:12px;}
    #txt{
        height:400px;
        width:600px;
        border:#333 solid 1px;
        padding:5px;}
    p{
        line-height:18px;
        text-indent:2em;}
    </style>
    </head>
    <body>
      <h2 id="con">JavaScript课程</H2>
      <div id="txt"> 
         <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
            <p>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p>
            <p>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
            <p>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
      </div>
      <form>
      <!--当点击相应按钮,执行相应操作,为按钮添加相应事件-->
        <input type="button" value="改变颜色"  onClick="changeColor()" />  
        <input type="button" value="改变宽高"  onClick="changeWidthAndHeight()" / >
        <input type="button" value="隐藏内容"  onClick="displayContentNone()" / >
        <input type="button" value="显示内容"  onClick="displayContentBlock()" / >
        <input type="button" value="取消设置"  onClick="setConfirm()" / >
      </form>
      <script type="text/javascript">
        //定义"改变颜色"的函数
        function changeColor(){
            var txtColor = document.getElementById("txt");
            txtColor.style.color = "red";
            txtColor.style.backgroundColor = "blue";
        }
        
        //定义"改变宽高"的函数
        function changeWidthAndHeight(){
            var wh = document.getElementById("txt");
            wh.style.width = "700px";
            wh.style.height = "200px";
        }
        
        //定义"隐藏内容"的函数
        function displayContentNone(){
            var dcn = document.getElementById("txt");
            dcn.style.display = "none";
        }
        
        //定义"显示内容"的函数
        function displayContentBlock(){
            var dcb = document.getElementById("txt");
            dcb.style.display = "block";
        }
        
        //定义"取消设置"的函数
        function setConfirm(){
            var sc = document.getElementById("txt");
            if(confirm("确定取消设置吗")){
                sc.removeAttribute("style");
            }
        }
      </script>
    </body>
    </html>

    ---------------------------------

    没看出你错哪儿了,你参考下我的

  • 茉心
    2016-11-30 21:26:18

    楼主方法没错啊


  • qq_云卷云舒_8
    2016-11-30 19:52:49

       <input type="button" value="改变颜色"  onclick="changeColor()">  

        <input type="button" value="改变宽高"  onclick="changeWidth()">

        <input type="button" value="隐藏内容"  onclick="changeHidden()">

        <input type="button" value="显示内容"  onclick="changeDisplay()">

        <input type="button" value="取消设置"  onclick="changeSet()">

     

      <script type="text/javascript">

    //定义"改变颜色"的函数

    var obj=document.getElementById("txt");

    function changeColor(){

        

        obj.style.color="red";

        obj.style.backgroundColor="#ccc";

    }

    //定义"改变宽高"的函数

    function changeWidth(){

        // var obj=document.getElementById("txt");

        obj.style.width="200px";

        obj.style.height="300px";

    }

    //定义"隐藏内容"的函数

    function changeHidden(){

        // var obj=document.getElementById("txt");

        obj.style.display="none"; 

    }


    //定义"显示内容"的函数

    function changeDisplay(){

        // var obj=document.getElementById("txt");

        obj.style.display="block";

    }


    //定义"取消设置"的函数

    function changeSet(){

        // var obj=document.getElementById("txt");

        var con=confirm("是否确定取消设置");

        if(con==true){

            obj.removeAttribute('style');

        }else{

           document.write("您取消了设置"); 

       }

    }

    </script>


  • qq_云卷云舒_8
    2016-11-30 18:27:33

    用你的代码试了一下,其他没问题,最后少了一个</script>

    qq_云卷云... 回复shuang...

    可以呀,你在网页中按F12看一下Console那里报错没,可能是其他地方出错了

    2016-11-30 19:55:15

    共 3 条回复 >

  • shuang_shuang
    2016-11-30 16:50:23

    对啊,然后我对比了一下其他人的程序,我觉得没有错的地方了,但是就是不行

    shuang... 回复qq_云卷云...

    去掉了,也不行

    2016-11-30 19:19:09

    共 2 条回复 >

  • qq_对世界只有1兴趣喵喵_0
    2016-11-30 16:45:15

    每个按钮都没反应吗


JavaScript入门篇

JavaScript做为一名Web工程师的必备技术,本教程让您快速入门

738661 学习 · 9561 问题

查看课程

相似问题