为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/JavaScript入门篇

点了4个按钮没反应嗷嗷啊

<!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="changewh()">

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

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

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

  </form>

  <script type="text/javascript">

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

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

function changecolor(){

    name.style.color="red";

    name.style.backgroundColor="#CCC";

}

function changewh(){

    name.style.width="200px";

    name.style.height="200px";

}

function hide(){

    name.style.display="none";

}

function unhide(){

    name.style.display="block";

}

function delsetting(){

    var a=confirm("是否取消设置？");

    if (a==true){

        name.removeAttribute('style');

    }

}


  </script>

</body>

</html>


土韵乡情

2018-06-23

源自：JavaScript入门篇   4-1

关注问题 我要回答
857
操作
收起

正在回答

7 回答

qq_骑行夏威夷_1 回答被采纳 +2 积分
2018-06-23

没调用id，在函数里。

如果你不调用id怎么显示？

我给你一小段，你就明白了。

function shen(){
  
    n=document.getElementById("con");
    n.style.color="red";
    n.style.backgroudColor="blue";
}


0 回复 有任何疑惑可以回复我~
收起回答
#1

土韵乡情 提问者

非常感谢！
2018-06-26 回复 有任何疑惑可以回复我~
#2

土韵乡情 提问者

你能看一下我的最新评论吗？关于这个问题的，又不懂了
2018-06-26 回复 有任何疑惑可以回复我~
#3

土韵乡情 提问者

我在下面有个最新留言
2018-06-26 回复 有任何疑惑可以回复我~
决明_
2018-07-31

你的JS第一行代码有问题。

js的函数外语句在页面初始化前调用，你可以把它理解为全局变量。这个时候将getElementById放在函数外自然是不行的。页面还没加载完成，获取id自然是获取不到的。

0 回复 有任何疑惑可以回复我~
收起回答
土韵乡情 提问者
2018-06-26

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="txttent-Type" txttent="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="changeSize()">

    <input type="button" value="隐藏内容" onClick="hidetext()">

    <input type="button" value="显示内容" onClick="showtext()">

    <input type="button" value="取消设置" onClick="resettext()">

  </form>

  <script type="text/javascript">

   var myh = document.getElementById("con");

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

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

function changeColor(){

    mydiv.style.color="red";

    mydiv.style.backgroundColor="#ccc";

}


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

function changeSize(){

    mydiv.style.width="200px";

    mydiv.style.height="300px";

}


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

function hidetext(){

    mydiv.style.display="none";

}


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

function showtext(){

    mydiv.style.display="block";

}


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

function resettext(){

    var mychose = confirm();

    if(mychose==true){

       mydiv.removeAttribute("style");

    }

}


  </script>

</body>

</html>

为什么这个代码也是把id定义在了函数外面，他就能运行成功？

0 回复 有任何疑惑可以回复我~
收起回答
Hunter云
2018-06-24

如果标点符号没问题就没问题了，没反应的话把浏览器关掉重来，我刚刚也是，代码正确但没反应，重启浏览器后就可以了

0 回复 有任何疑惑可以回复我~
收起回答
慕雪3518308
2018-06-23

如果用这段代码没反应的话，可以刷新一下网页，再提交试试。

<!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="kuanggao()">

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

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

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

  </form>

  <script type="text/javascript">

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

    function changeColor()

    {

       var c = document.getElementById("con");

       c.style.color="red";

       c.style.backgroundColor="blue";

       

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

       t.style.color="green";

       t.style.backgroundColor="yellow";

    }

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

    function kuanggao()

    {

       var c = document.getElementById("con");

       c.style.width="200px";

       c.style.height="300px";

       

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

       t.style.width="200px";

       t.style.height="300px";

    }


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

    function hind()

    {

       var c = document.getElementById("con");

       c.style.display="none";

       

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

       t.style.display="none";

    }


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

    function show()

    {

       var c = document.getElementById("con");

       c.style.display="block";

       

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

       t.style.display="block";

    }


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

    function remove()

    {

        var c = document.getElementById("con");

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

        var n = confirm("是否取消设置？");

        if(n==true)

        {

            c.style="style"

            t.style="style"

        }

    }



  </script>

</body>

</html>


0 回复 有任何疑惑可以回复我~
收起回答
qq_骑行夏威夷_1
2018-06-23

答案正不正解我不知道，自己刚才打出来的，但是全部能运行，参考一下把。


<!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="shen()"> 
    <input type="button" value="改变宽高" onclick="jin()">
    <input type="button" value="隐藏内容" onclick="yu()">
    <input type="button" value="显示内容" onclick="shi()">
    <input type="button" value="取消设置" onclick="wo()">
  </form>
  <script type="text/javascript">
//定义"改变颜色"的函数
function shen(){
  
    n=document.getElementById("con");
    n.style.color="red";
    n.style.backgroudColor="blue";
   
    i=document.getElementById("txt");
    i.style.color="red";
    i.style.backgroudColor="blue";
}


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

function jin(){
    b=document.getElementById("con");
    b.style.width="200px";
    b.style.height="200px";
   
   
    b=document.getElementById("con");
    b.style.width="200px";
    b.style.height="200px";
}

//定义"隐藏内容"的函数
function yu(){
    haha=document.getElementById("con");
    haha.style.display="none";
   
   
    haha=document.getElementById("txt");
    haha.style.display="none";

}


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

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

function wo(){
    li=document.getElementById("con");
    yong=document.getElementById("txt");
   
    ya=confirm("是否取消设置？");
   
    if(ya==true){
      
      li.style="style"
      yong.style="style"
    }   
       
   
   
    else
    {}
   
   
   
   
   
}


  </script>
</body>
</html>


0 回复 有任何疑惑可以回复我~
收起回答
qq_骑行夏威夷_1
2018-06-23

同理，若是整段变化，可以麻烦点这么写，笨方法，希望对你有用吧。

function shen(){
  
    n=document.getElementById("con");
    n.style.color="red";
    n.style.backgroudColor="blue";
   
    i=document.getElementById("txt");
    i.style.color="red";
    i.style.backgroudColor="blue";
}

0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
JavaScript入门篇
  • 参与学习       740102    人
  • 解答问题       9566    个

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

进入课程

本课相似问答

2 回答按钮点了没反应

4 回答点了按钮没有反应

3 回答点了按钮没有反应

2 回答点按钮没反应

3 回答点按钮没反应
搜索更多本课相关问答

点了4个按钮没反应嗷嗷啊

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信