The most viewed posts

ZilaStar ICT Jul 26 2022, 11:37:55

close (HTML DOM Window)

<!DOCTYPE html>
<html>
<head>
<title>Js Code Testing</title>
</head>
<body>
<div id = "msg"></div>
<button onclick = "openWin()">Open Window</button>
<button onclick = "closeWin()">Close Window</button>
<button onclick = "chkStatus()">Check Status</button>

<script>

var myWin;

function openWin(){
myWin = window.open("", "myWin", "width=300px, height=200px");
}

function closeWin(){
if(myWin){
myWin.close();
}
}

function chkStatus(){
if(!myWin){
document.getElementById("msg").innerHTML = "Window has never been opened.";
}else{
if(myWin.closed){
document.getElementById("msg").innerHTML = "Window has been closed.";
}else{
document.getElementById("msg").innerHTML = "Window stills opend.";
}
}
}

</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 25 2022, 11:35:58

onchange 1 (HTML DOM Events)

<!DOCTYPE html>

<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<input type = "text" id = "fname" onchange = "jsFun()">
<script>
function jsFun(){
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 24 2022, 11:35:20

onchange (HTML DOM Events)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<select id = "myId" onchange = "jsFun()">
  <option value = "#">Choose Options</option>
  <option value = "Thet">Thet</option>
  <option value = "Naing">Naing</option>
  <option value = "Win">Win</option>
</select>
<p id = "demo"></p>
<script>
function jsFun(){
var x = document.getElementById("myId").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 23 2022, 12:09:13

appendChild() (HTML DOM Elements)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<button onclick = "jsFun()"> + </button>
<script>
function jsFun(){
var para = document.createElement("P");
var txtNode = document.createTextNode("Paragraph");
para.appendChild(txtNode);
document.body.appendChild(para);
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 22 2022, 12:08:45

appendChild() (HTML DOM Elements)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
#myDiv{
width: 200px;
border: 2px solid red;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<button onclick = "jsFun()"> + </button>
<p></p>
<div id = "myDiv">My Example</div>
<script>
function jsFun(){
var para = document.createElement("P");
var txtNode = document.createTextNode("Example");
para.appendChild(txtNode);
document.getElementById("myDiv").appendChild(para);
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 21 2022, 12:08:17

appendChild() (HTML DOM Elements)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<ul id = "myText">
  <li>Thet</li>
  <li>Naing</li>
</ul>

<button onclick = "jsFun()">Try It</button>

<script>
function jsFun(){
var node = document.createElement("LI");
var txtNode = document.createTextNode("Win");
node.appendChild(txtNode);
document.getElementById("myText").appendChild(node);
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 20 2022, 12:07:06

addEventListener() (HTML DOM Elements)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<button id = "myId">Try It</button>
<p id = "demo"></p>
<script>
var x = document.getElementById("myId");
x.addEventListener("mouseover", msOver);
x.addEventListener("click", msClick);
x.addEventListener("mouseout", msOut);

function msOver(){
document.getElementById("demo").innerHTML += "Mouse Over <br />";
}

function msClick(){
document.getElementById("demo").innerHTML += "Mouse Click <br />";
}

function msOut(){
document.getElementById("demo").innerHTML += "Mouse Out <br />";
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 19 2022, 12:06:32

addEventListener() (HTML DOM Elements)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<button id = "myId">Try It</button>
<p id = "demo"></p>
<script>
var p1 = 9;
var p2 = 9;
document.getElementById("myId").addEventListener("click", function(){myFun(p1, p2)});

function myFun(num1, num2){
var x = num1 * num2;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 18 2022, 12:05:41

addEventListener() (HTML DOM Elements)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<button id = "myId">Try It</button>

<script>
var x = document.getElementById("myId");
x.addEventListener("click", myFun1);
x.addEventListener("click", myFun2);

function myFun1(){
alert("Function1");
}

function myFun2(){
alert("Function2");
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 17 2022, 11:54:00

querySelectorAll() (HTML DOM Document)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
</head>
<body>
<h1 class = "example">Heading</h1>
<p class = "example">Paragraph</p>
<button onclick = "jsFun()">Try It</button>
<script>
function jsFun(){
var i;
var x = document.querySelectorAll(".example");
for(i = 0; i < x.length; i++){
x[i].style.color = "red";
}
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 16 2022, 11:52:53

getElementsByTagName (HTML DOM Document)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
</style>
</head>
<body>
<ol>
   <li>Example_1</li>
   <li>Example_2</li>
   <li>Example_3</li>
</ol>
<button onclick = "jsFun()">Red</button>
<script>
function jsFun(){
var i;
var x = document.getElementsByTagName("LI");
for(i = 0; i < x.length; i++){
x[i].style.color = "red";
}
}
</script>
</body>
</html>

💬 Comment 🔗 Get link

ZilaStar ICT Jul 15 2022, 11:51:48

getElementsByClassName (HTML DOM Document)

<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
.Example{
border: 2px solid yellow;
padding: 5px;
width: 100px;
}
</style>
</head>
<body>
<div class = "Example">
Example_1
</div>
<div class = "Example">
Example_2
</div>
<div class = "Example">
Example_3
</div><br />

<button style = "background: red" onclick = "colRed()">Red</button>
<button style = "background: green" onclick = "colYellow()">Green</button>

<script>
function colRed(){
var i;
var x = document.getElementsByClassName("Example");
for(i = 0; i < x.length; i++){
x[i].style.backgroundColor = "red";
x[i].style.color = "white";
}
}

function colYellow(){
var i;
var x = document.getElementsByClassName("Example");
for(i = 0; i < x.length; i++){
x[i].style.backgroundColor = "green";
x[i].style.color = "yellow";
}
}

</script>
</body>
</html>

💬 Comment 🔗 Get link

Page : 3 of 30

Pre