Fatal编程技术网

Javascript 显示隐藏元素

javascript css

Javascript 显示隐藏元素,javascript,css,getelementbyid,Javascript,Css,Getelementbyid,所以我不确定这里发生了什么，我已经简单地做了几十次了，但是我试图让一个按钮显示隐藏元素的id，但它不断回来，因为无法获得null的属性。这是给你们的一个小样本。从html到css再到Js <?php //make connection to server //para(server,username,passwd,dbname) $mysql = new MySQLi('localhost','root','','dcma'); //opti cus erro msg if($

所以我不确定这里发生了什么，我已经简单地做了几十次了，但是我试图让一个按钮显示隐藏元素的id，但它不断回来，因为无法获得null的属性。这是给你们的一个小样本。从html到css再到Js

    <?php

//make connection to server
//para(server,username,passwd,dbname)
$mysql = new MySQLi('localhost','root','','dcma');
//opti cus erro msg

if($mysql->connect_error){
die('connection failed'.$mysql->connect_error); 


}
if($stmt = $mysql-> prepare('select * from channels')){

//run the sql query
$stmt->execute();

$stmt->bind_result($dates,$views1,$views2,$views3,$temp);
?>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="js/script.js"></script>
</head>

<body>
<div id="main">
<div id="topbar">
<img src="img/Untitled-1_03.png" alt="maintop">
</div>
    <div id="chart">
    <img src="img/icons_16.png" alt="vtub" class="vtub">
    <img src="img/Untitled-1_06.png" alt="chart">
    </div>
    <div id="bottom">
    <img src="img/icons_21.png" alt="subscribe" class="sub">
<img src="img/Untitled-1_08.png"alt="rawdataarea">
        </div>
   <!-- <div id="channels">
 <img src="img/show.png" alt="show" class="cnlid">  <img src="img/show.png" alt="show" class="cnlid">  <img src="img/show.png" alt="show" class="cnlid">
 </div>-->
        <div id="rawdata">
</div>
<div id="sidebar">
<img src="img/chns_15.png" alt="chnbtn" class="btn" id="first" >
<img src="img/chns_18.png" alt="chnbtn" class="btn1" id="second" >
<img src="img/chns_20.png" alt="chnbtn" class="btn2" id="third" >
    <img src="img/Untitled-1_13.png" alt="side" class="side">
    </div>
<div id="rawdat">
<img src="img/channel3.png"  alt="chn3" id="three">
<img src="img/channel2.png" alt="chn2" id="two">
    <img src="img/channl1.png"  alt="chn1" id="one">
    <img src="img/total.png" class="total" alt="total">
    <img src="img/Untitled-1.png"  alt="dataarea" class="raw">  
    </div>

<div class="datas">

  <table>

<tr>
<td>Channel ID#1</td>
<td>Channel ID#2</td>
<td>Channel ID#3</td>
<td>Day of the week</td>
<td>Temperture </td>
</tr>

<?php
while($stmt->fetch()){
?>
<tr>
<td><?php echo $views1;?> </td>
<td><?php echo $views2;?> </td>
<td><?php echo $views3;?> </td>
<td><?php echo $dates;?></td>
<td><?php echo $temp;?></td>
</tr>
<?php } ?>
</table> 
</div>
<div id="rawdatagrahp">
<img src="img/Untitled-1_16.png" alt="chart" class="chart">
 </div>

</div>

</body>

</html><?php
//close connection
$stmt->close();
}else{
    echo 'bad query'.$mysql->error;
}
$mysql->close();
?>
您没有id为“first”的元素……这太多代码了，无法查看。请把它归结为30-40行。@Moliminus我删除了我的答案，因为它不再与代码相关。然而，我并没有遇到与您相同的问题，您的新代码。这是我的新小提琴。准确的错误是什么？它是否给出了行号？ 
#one{
          float: left;
  position: absolute;
  z-index: 200;
    width: 54%;
  height: 323px;
  display:block;

}

#two{
      float: left;
  position: absolute;
  z-index: 200;
    width: 54%;
  height: 323px;
  display:block;



#three{
float: left;
  position: absolute;
  z-index: 200;
  width: 54%;
  height: 323px;
  display:block;

}
var graphone = document.getElementById("one");
var graphtwo = document.getElementById("two");
var graphthree = document.getElementById("three");



onload=init;

function init() {



document.getElementById("first").onclick = function(e){
        e.preventDefault(); 
        onebtn();
    }

    document.getElementById("second").onclick = function(e){
        e.preventDefault(); 
        twobtn();
    }
    document.getElementById("third").onclick = function(e){
        e.preventDefault(); 
        threeone();
    }

function onebtn(){
        if(graphone.style.display == null || graphone.style.display == "none") {
        graphone.style.display = "block";
        graphtwo.style.display = "none";
        graphthree.style.display = "none";
    } else {
        graphone.style.display = "none";
    }
}



function twobtn(){
            if(graphtwo.style.display == null || graphtwo.style.display == "none") {
        graphtwo.style.display = "block";
        graphone.style.display = "none";
        graphthree.style.display = "none";
    } else {
        graphtwo.style.display = "none";
    }
}




function threeone(){
            if(graphthree.style.display == null || graphthree.style.display == "none") {
        graphthree.style.display = "block";
        graphone.style.display = "none";
        graphtwo.style.display = "none";
    } else {
        graphthree.style.display = "none";
    }
}
}