如何显示或隐藏图形？ [英] How to show or hide graphics ?
问题描述
我制作了两个图形（线条和条形图）和两个按钮。
单击线条时，我想要屏幕上的线条图形和隐藏条形图，点击时需要
酒吧，我想要屏幕上的栏和线隐藏
代码显示为解决方案2
我尝试过：
<！DOCTYPE html>
< html>
< head>
< meta charset =UTF-8>
< title> Deelnemers per jaar< / title>
< link href =VerticalBarGraph.css ='stylesheet'type ='text / css'/> <！ - Grafiek HTML - >
< script language =JavaScripttype =text / javascript>
函数ChoiseButton（）{
var e = document.getElementById
if（e =='line'）{
document.getElementsByid （'line2'）。style.visibility ='visible'
document.getElementsByClassName（'bargraph'）。style.visibility ='hidden'
} else {
document.getElementsByid（'line2'）。style.visibility ='hidden'
document.getElementsByClassName（'bargraph'）。style.visibility ='visible'
}
}
< / script>
< / head>
< body>
< button id =line type =button>行< / button>
< button id =bartype =button> Bar< / button>
I have made two graphics (Line and Bar) and two buttons.
When clicking on Line I want Line graphic on screen and Bar hidden,
when clicking on Bar, I want Bar on screen and Line hidden
Code is shown as solution 2
What I have tried:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Deelnemers per jaar</title>
<link href="VerticalBarGraph.css" rel='stylesheet' type='text/css' /> <!-- Grafiek HTML-->
<script language="JavaScript" type="text/javascript">
function ChoiseButton() {
var e = document.getElementById
if (e == 'line') {
document.getElementsByid('line2').style.visibility = 'visible'
document.getElementsByClassName('bargraph').style.visibility = 'hidden'
} else {
document.getElementsByid('line2').style.visibility = 'hidden'
document.getElementsByClassName('bargraph').style.visibility = 'visible'
}
}
</script>
</head>
<body>
<button id="line" type="button" >Line</button>
<button id="bar" type="button" >Bar</button>
每个人的deelnemers
< canvas id =GraficoLinestyle =width：100％; >< / canvas>
< script src ='js / Script2.js'>< / script>
< script src =js / Script1.js>< / script>
Deelnemers per jaar
<canvas id="GraficoLine" style="width:100%; "></canvas>
<script src='js/Script2.js'></script>
<script src="js/Script1.js"></script>
< ！ - Grafiek.html - >
<!-- Grafiek.html -->
- 2006
- 2007
- 2008
- 2009年
- 2010
- 2011
- 2012
- 2013
- 2014
- 2015
- 2016
- 2006
- 2007
- 2008
- 2009
- 2010
- 2011
- 2012
- 2013
- 2014
- 2015
- 2016
- 25
- 20
- 15
- 10
- 5
- 0
Aantal deelnemers door de jaren heen
Aantal deelnemers door de jaren heen
< /正文>
< / html>
</body>
</html>
推荐答案
我可以立即看到一个明显的错误：
I can immediately see one apparent bug:
if (dif == 'lijn') { ... }
对象 dif 无法与任何字符串进行比较;它是一个表示HTML文档的对象。你根本不需要检查任何东西。您可以通过属性 id 找到该元素，但此属性值在页面上应始终是唯一的。因此，你要么正确地找到它，要么不能 - 它不可能是错误的元素;整个想法是错误的。
您还应该知道找不到的元素返回为null，并且您无法搜索动态添加到HTML DOM的元素：
document.getElementById（） - Web API 。
隐藏和显示元素的方式不是唯一的方法。不同的方法会给你不同的效果，首先，隐藏的方式会影响布局。希望，或多或少全面地了解我的答案，其中描述了不同的方法：如何显示和隐藏div 。
The object dif cannot be compared with any string; it is an object representing HTML document. You don't need to check up anything at all. You find the element by the attribute id, but this attribute value should always be unique on page. Therefore, you either correctly find it, or not — it cannot possibly be "wrong element"; the whole idea is wrong.
You also should know that not found element is returned as null, and that you cannot search for elements added dynamically to your HTML DOM:
document.getElementById() — Web APIs.
Your way of hiding and showing an element is not the only one. Different methods give you different effects, first of all, it the ways the hiding affects the layout. Please see my answer which describes different methods, hopefully, more or less comprehensively: How to show and hide div.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Deelnemers per jaar</title>
<link href="VerticalBarGraph.css" rel='stylesheet' type='text/css' />
<script src='js/Script2.js'></script>
<script src='js/Script1.js'></script>
<script type="text/javascript">
function ToonLijn() {
document.getElementById("Bar").style.display = "none";
document.getElementById("Lijn").style.display = "block";
}
function ToonBar() {
document.getElementById("Lijn").style.display = "none";
document.getElementById("Bar").style.display = "block";
}
</script>
</head>
<body onload="ToonBar()">
<button onclick="ToonLijn()" style="width:100px">Lijndiagram</button> <br/>
<button onclick="ToonBar()" style="width:100px">Staafdiagram</button>
<div id="Bar">
<div class="bargraph" style="width: 805px;">
<ul class="bars">
<li class="bar1 purplebar" style="height: 170px;">17</li>
<li class="bar2 redbar" style="height: 230px;">23</li>
<li class="bar3 bluebar" style="height: 190px;">19</li>
<li class="bar4 greenbar" style="height: 140px;">14</li>
<li class="bar5 orangebar" style="height: 230px;">23</li>
<li class="bar6 grapebar" style="height: 170px;">17</li>
<li class="bar7 crimsonbar" style="height: 220px;">22</li>
<li class="bar8 navybar" style="height: 130px;">13</li>
<li class="bar9 goldbar" style="height: 140px;">14</li>
<li class="bar10 redbar" style="height: 160px;">16</li>
<li class="bar11 orangebar" style="height: 180px;">18</li>
</ul>
<ul class="label"><li>2006</li><li>2007</li><li>2008</li><li>2009</li><li>2010</li><li>2011</li><li>2012</li><li>2013</li><li>2014</li><li>2015</li><li>2016</li></ul>
<ul class="y-axis"><li>25</li><li>20</li><li>15</li><li>10</li><li>5</li><li>0</li></ul>
<p class="centered">Aantal deelnemers door de jaren heen</p>
</div>
</div>
<div id="Lijn">
<div style="width:50%; margin:20px auto;">
<canvas id="GraficoLine" style="width:100%;"></canvas>
</div>
</div>
</body>
</html>
这篇关于如何显示或隐藏图形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
