-
Notifications
You must be signed in to change notification settings - Fork 0
/
ifelse.html
47 lines (47 loc) · 2.36 KB
/
ifelse.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sno - If</title>
<link rel="icon" type="image/x-icon" href="https://avatars.githubusercontent.com/u/149719209?s=200&v=4"/>
<link rel="stylesheet" href="./style.css">
</head>
<body data="{view:false}">
<div incl="sidebar.html"></div>
<div class="main">
<br/><br/><h1>If Tag</h1>
<span class="hr"></span>
The <b>If</b> tag allows you to hide or show any element based on the value of a boolean variable.<br/>
Sounds easy right? <em>but you've gotta know a couple things first.</em><br/>
<ol>
<li>Gotta have the <b>script</b> tag</li>
<li>Initiate the <b>data</b> attribute</li>
<li>And you also have to have a <b>boolean variable</b></li>
</ol>
<p class="code">
<body data="{show:false}"><br/>
<button onclick="$('show = toggle(show)')">Show</button><br/>
<p if="show">Show = true!</p><br/>
</body>
</p>
<p class="code">
<button class="betterButton" onclick="$('view = toggle(view)')">Show</button>
<span if="view">Show = true!</span>
</p><br/>
<h2>The Breakdown</h2>
<span class="hr"></span>
By this point you've got the data tag, so all were doing is declaring the variable show with a false value.<br/>
Then you can use the onclick attribute with the function $("") to call an action on a click. <br/><br/>
The click event is setting the show variable to the opposite of show.<br/>
It uses the built in toggle() function. The toggle function takes the prop of the variable and spits out the opposite.<br/>
The fun bit is up ahead. The actual if attribute is also taking a javascript evaluation.<br/>
This means you could run something like <b>if="count==2"</b>, because it is just an if statement.
<br/><br/><br/>
Congrats, you now know <b>if statements</b>!
<br/>
<br/>
<a href="./data.html">[Prev]</a> <a href="./click.html">[Next]</a>
<script src='https://snojs.github.io/sno/crystal.js'></script>
</div>
</body>