revision:
code:
<div>
<div id="demo1" class="spec">demo 1 - change display</div>
<button onclick="toggle('demo1', 'hide1')">change display</button>
<br><br>
<div id="demo2" class="spec">demo 2 - change visibiliy</div>
<button onclick="toggle('demo2', 'hide2')">change visibility</button>
<br><br>
<div id="demo3" class="spec">demo 3 - change opacity</div>
<button onclick="toggle('demo3', 'hide3')">change opacity</button>
<br><br>
<div id="demo4" class="spec">demo 4 - change width and height
(not recommended)</div>
<button onclick="toggle('demo4', 'hide4')">change width/height</button>
<br><br>
<div id="demo5" class="spec">demo 5 - put out of screen</div>
<button onclick="toggle('demo5', 'hide5')">out of screen</button>
</div>
<style>
.hide1{display: none;}
.hide2{visibility: hidden;}
.hide3{opacity: 0;}
.hide4{width: 0; height: 0; font-size: 1px;}
.hide5{position: fixed; left: -100vw;}
button{margin-left: 3vw; width: 10vw; background-color:darkolivegreen;
color:darkorange; font-size: 1vw;}
</style>
<script>
function toggle (target, cclass) {
document.getElementById(target).classList.toggle(cclass);
}
</script>
code:
<div>
<div id="fadetext">Click the button and I will disappear. Click again and I will re-appear!!</div>
<input type="button" value="fading" onclick="togglevis()"/><br><br>
<script>
function togglevis () {
document.getElementById("fadetext").classList.toggle("hide");
}
</script>
<div id="slidetext">On clicking the button you will see me sliding in and
sliding out.</div>
<input type="button" value="sliding" onclick="sliding()"/><br>
<script>
function sliding() {
document.getElementById("slidetext").classList.toggle("show");
}
</script>
</div>
<style>
input[type=button]{margin-left: 3vw; width:10vw; background-color:darkolivegreen;
color:darkorange; font-size: 1vw;}
#fadetext {transition: all 1s; height: auto; opacity: 1;}
#fadetext.hide {opacity: 0;height: 0; /* Optional */ visibility: hidden;}
#slidetext {background: #473736; width:30vw; padding: 10px; border: 1px solid #b52110;
color: #fff;font-weight: bold;position: relative; left: -999px; transition: all 0.5s; visibility: hidden;}
#slidetext.show {left: 0.5vw; visibility: visible;}
</style>
Click on button to hide the element by class name
<div>
<p style="margin-left:3vw;">Click on button to hide the element by class name</p>
<div class="outer">
<div class="child1">Child 1</div>
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
<div class="child2">Child 2</div>
</div> <br>
<button style="margin-left:3vw;" onClick="hide()">click here</button>
<p style="margin-left:3vw;" id="DOWN"></p>
</div>
<script>
var down = document.getElementById('DOWN');
function hide() {
document.getElementsByClassName('child1')[0].
style.visibility = 'hidden';
down.innerHTML = "Element is hidden";
}
</script>
code:
<div>
<form action="#">
<label for="type">Add element type</label>
<input type="text" id="type" placeholder="Like: div, h1, li...." value="li" />
<br /><br />
<label for="value">Add element value</label>
<input type="text" id="value" placeholder="Like: Hello guys" value="child 2" />
<br /><br />
<button type="button" onClick="addItem()">Add</button>
</form>
<ol id="parent"><li>list item 1</li></ol>
</div>
<style>
form{margin-left: 3vw;}
button{width: 10vw; background-color:darkolivegreen; color:darkorange; font-size: 1vw; cursor: pointer;}
</style>
<script>
function addItem() {
let type = document.getElementById("type").value;
let value = document.getElementById("value").value;
type = document.createElement(type);
type.appendChild(document.createTextNode(value));
document.getElementById("parent").appendChild(type);
}
</script>
JavaScript will make this text disappear when you click the button
Two buttons to manipulate this small text
code:
<div>
<div id="testblock">CSS properties can also be hidden and shown.</div>
<input type="button" value="change CSS" onclick="toggleCSS()"/><br><br>
<script>
function toggleCSS() {
var block = document.getElementById("testblock");
if (block.style.display=="") {
block.style.display = "none";
} else {
block.style.display = "";
}
}
</script>
<input type="button" onclick="document.getElementById('hide').style.display='none'"
value="hide me"><br><br>
<p id="hide">JavaScript will make this text disappear when you click the button</p>
<input type="button"onclick="document.getElementById('show').style.display='block'"
value="show me"> <br><br>
<p id="show" style="display:none">JavaScript can show hidden HTML elements</p>
<button type = "button" onclick = "displayHide()">hide</button>
<button type = "button" onclick = "displayShow()">show</button>
<p id = "pid">Two buttons to manipulate this small text</p>
<script>
function displayHide() {
document.getElementById("pid").style.visibility = "hidden";
}
function displayShow() {
document.getElementById("pid").style.visibility = "visible";
}
</script>
</div>
<style>
#hide, #show, #pid{margin-left: 3vw;}
#boxtog:checked ~ div#texttog {display: none;}
</style>
click the objects
code:
<div>
<p class="click_objects">click the objects</p><br>
<div class="objects">
<div class="circle" id="circle"></div> <br>
<div class="rounded" id="rounded"></div> <br>
<div class="square" id="square"></div> <br>
</div><br>
<button type="button" onclick="reset()" value="reset">reset</button>
</div>
<style>
.click_objects{display: block; padding: 1vw; color:darkgreen; font-size:1.3vw; background-color: skyblue;}
.objects{display: flex; flex-flow: row nowrap; justify-content: space-around;}
.circle { width: 120px; height: 130px; border-radius: 50%; float: left; margin-right: 50px; }
.rounded {width: 120px; height: 130px; border-radius: 25%; float: left; margin-right: 50px; }
.square {width: 120px; height: 130px; border-radius: 0%; float: left; margin-right: 50px; }
#circle {background-color: #196F3D; }
#rounded {background-color: #5DADE2;}
#square {background-color: #58D68D;}
</style>
<script type="text/javascript">
document.getElementById("circle").onclick = function() {
document.getElementById("circle").style.display = "none";
}
document.getElementById("rounded").onclick = function() {
document.getElementById("rounded").style.display = "none";
}
document.getElementById("square").onclick = function() {
document.getElementById("square").style.display = "none";
}
function reset() {
document.getElementById("circle").style.display = "flex";
document.getElementById("rounded").style.display = "flex";
document.getElementById("square").style.display = "flex";
}
</script>
code:
<form>
<select id="mySelect">
<option>USA</option>
<option>Germany</option>
<option>Belgium</option>
<option>France</option>
<option>China</option>
<option>UK</option>
<option>UAE</option>
<option>Micronesia</option>
</select>
<input type="button" onclick="removeOption()" value="remove option"/>
<p id="result"></p>
</form><br>
<script>
function removeOption(){
var select =document.getElementById("mySelect")
select.remove(select.selectedIndex)
document.getElementById('result').innerHTML = " the option is removed"
}
</script>
code:
<div>
<p id="target1"></p>
<div id="target-div">This is the targeted div box.</div>
<br>
<button style="margin-left:2vw;" onClick="remove()">remove</button>
<p id="down" style="text-align:left;font-size: 1vw;"></p>
</div>
<style>
#target1{display:inline; text-align:left; font-size: 1vw; color:black;}
#target-div{background: green; height: 3vw; width: 15vw; margin: 0 1vw; color: white; text-align: center;}
#down{margin-left: 1vw;}
</style>
<script>
var up = document.getElementById('target1');
var down = document.getElementById('down');
var div = document.getElementById('target-div');
up.innerHTML = "Click on button to remove the element.";
function remove() {
div.parentNode.removeChild(div);
down.innerHTML = "Element is removed.";
}
</script>
code:
<div>
<h4 id="up11">outerHTML: the first layer of this example</h4>
<button style="margin-left: 3vw;" onclick="myClicking()">click to change</button>
</div>
<style>
#up11{margin-left: 1vw;}
</style>
<script>
function myClicking() {
let x = document.getElementById('up11');
x.outerHTML = "<h4>outerHTML: NOTE: the second layer of this example</h4>";
}
</script>
child 1
code:
<div>
<form action="#">
<label for="type2">Add element type</label>
<input type="text" id="type2" placeholder="Like: div, h1, li...." value="h3"/>
<br /><br />
<label for="value2">Add element value</label>
<input type="text" id="value2" placeholder="Like: Hello guys" value="Hi there"/>
<br /><br />
<label for="attr" style="font-weight:bold; color:blue">Add attributes:</label><br><br>
<form id="attr">
<label for="attrType">Add attribute type</label>
<input type="text" style="width:10vw;" placeholder="forexample: enter 'class' without quotes"
id="attrType" value="class"/>
<br/><br/>
<label for="attrValue">Add attribute value</label>
<input style="width:10vw;" type="text" placeholder="for example: enter 'child' without quotes"
id="attrValue" value="child" /> <br /><br />
<button type="button" onClick="addAttribute()">Add</button>
</form>
<div><p>child 1</p></div>
</form>
<script>
function addAttribute() {
let parent = document.getElementById("body");
let attrType = document.getElementById("attrType");
let attrValue = document.getElementById("attrValue");
let type2 = document.getElementById("type2");
let value2 = document.getElementById("value2");
if (type2.value == "" || value2.value == "") {
window.alert("There is an error in form input");
window.reload();
}
type2 = document.createElement(type2.value);
type2.appendChild( document.createTextNode(value2.value));
if (attrValue.value == "" || attrType.value == "") {
attr = null;
}
else {
type.setAttribute(attrType.value, attrValue.value);
}
parent.appendChild(type2);
}
</script>