所以我不确定这里发生了什么,我已经轻松地完成了这几十次了,但是我试图通过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();
?>
}
#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";
}
}
}