Friday, 17 August 2018
TOGGLE BUTTON JAVA SCRIPT
----------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------
<button id="ButtonId">Button</button>
<p id="TextBox"> </p>
<script>
TextBox.innerHTML = "
";
ButtonId.onclick = function(){
if (TextBox.innerHTML
== " ") {
TextBox.innerHTML = "HI";
}
else {
TextBox.innerHTML = "
";
}
}
</script>
OTHER CODE
<button id="OnClick">Button</button>
<p id="innerHTML"> </p>
<script>
innerHTML.innerHTML = "
";
OnClick.onclick = function(){
if (innerHTML.innerHTML ==
" ") {
innerHTML.innerHTML = "innerHTML";
}
else {
innerHTML.innerHTML = " ";
}
}
</script>
------------------------------------------------------------------
IMAGE HIDE AND SHOW WITH TOGGLE BUTTON
if (ImageId.style.display === "none") {
ImageId.style.display = "block";
}
else {
ImageId.style.display = "none";
}
------------------------------------------------------------------
<!-- https://stackoverflow.com/questions/9075440/javascript-button-show-hide-on-text-changed --><button id="ButtonId" onclick="myFunction()">Try it</button></Br><img id="ImageId" style="" src="https://www.w3schools.com/tags/smiley.gif"><script>ButtonId.onclick=function(){if(ImageId.style.visibility=="hidden"){ImageId.style.visibility="visible";}else{ImageId.style.visibility="hidden";}}</script>
------------------------------------------------------------------
DOCUMENT GET ELEMENT ID NOT USE ID OR CLASS SYMBOLDOCUMENT QUERY SELECTOR USE ID OR CLASS SYMBOL
OR USE DIV TAG IN DOCUMENT QUERY SELECTOR FOR SHOW TEXT
document.querySelector("div").innerHTML ="SelectorUseIDSymbol#"
------------------------------------------------------------------
<div id="D0"></div> <div class="D1"></div> <div id="NotUseIdClassSymbols"></div> <script> document.querySelector("#D0").innerHTML ="SelectorUseIDSymbol#" document.querySelector(".D1").innerHTML ="SelectorUseClassSymbol." document.getElementById("NotUseIdClassSymbols").innerHTML ="ElementNotUseIdClassSymbols"
</script>
--------------------------------------------------------------------------------------------------------------------------
USE VARIABLE LISTENER FOR BUTTON
HOW TO USE:
document.getElementById
document.querySelector
document.querySelectorAll
document.getElementsByTagName
--------------------------------------------------------------------------------------------------------------------------
<button id="ButtonId">BUTTON</button>
<script>
var ListenerVariable = document.getElementById("ButtonId");
ListenerVariable.onclick = function(){
ButtonId.innerHTML= "hi";
}
</script>
-------------------------------------------------------------------------------------------------------------
QUERY SELECTOR USE TAG IT USE FOR VARIABLE LISTENER NOT USE FOR TEXTBOX <button id="ButtonId">BUTTON</button>
<script>var ListenerVariable = document.querySelector("button");
ListenerVariable.onclick = function(){ButtonId.innerHTML= "hi";}</script>
-------------------------------------------------------------------------------------------------------------
<button id="ButtonId">BUTTON</button>
<script>var ListenerVariable = document.querySelector("button");
ListenerVariable.onclick = function(){ document.querySelector("button").innerHTML= "hi";}</script>
------------------------------------------------------------------------------------------------------------
<button id="ButtonId">BUTTON</button>
<script>
var ListenerVariable = document.querySelector("#ButtonId");
ListenerVariable.onclick = function(){
ButtonId.innerHTML= "hi";
}
</script>
--------------------------------------------------------------------------------------------------------------
<button id="ButtonId">BUTTON</button>
<script>
var ListenerVariable = document.querySelector("#ButtonId");
ButtonId.onclick = function(){
ButtonId.innerHTML= "hi";
}
</script>
-------------------------------------------------------------------------------------------------------------
<button class="ButtonClass">BUTTON</button>
<script>
var ListenerVariable = document.querySelector(".ButtonClass");
ListenerVariable.onclick = function() {
ListenerVariable.innerHTML= "hi";
};
</script>
------------------------------------------------------------------------------------------------------------
WHEN WE USE LISTENER VARIABLEBASIC DOCUMENT QUERY SELECTOR USE FOR LISTENER
AND WORKS WITH TAG
------------------------------------------------------------------------------------------------------------
<button id="ButtonId">BUTTON</button>
<script>
var ListenerVariable = document.querySelector("button");
ListenerVariable.onclick = function(){
ButtonId.innerHTML= "hi";
</script>
--------------------------------------------------------------------------------------------------------------
<button id="ButtonId">BUTTON</button>
<script>
var ListenerVariable = document.querySelectorAll("button");
ListenerVariable[0].onclick = function(){
ButtonId.innerHTML= "hi";
}
</script>
----------------------------------------------------------------------------------------------------------
<button id="ButtonId">BUTTON</button>
<script>
var ListenerVariable = document.querySelector("button");
var ListenerVariable = document.querySelector("button");
ListenerVariable.onclick = function(){
document.querySelector("button");.innerHTML= "hi";
}
</script>
document.querySelector("button");.innerHTML= "hi";
}
</script>
--------------------------------------------------------------------------------------------------------------
<button id="ButtonId">BUTTON</button>
<script>
var ListenerVariable = document.querySelectorAll("#ButtonId");
ListenerVariable[0].onclick = function(){
ButtonId.innerHTML= "hi";
}
</script>
-------------------------------------------------------------------------------------------------------------------------
<button id="ButtonId">BUTTON</button>
<script>
ButtonId.onclick = function(){
ButtonId.innerHTML= "hi";
}
</script>
-----------------------------------------------------------------------------------------------------------------------
<button id="ButtonId">BUTTON</button>
<script>
var ListenerVariable = document.getElementsByTagName("button");
ListenerVariable[0].onclick=function(){
ButtonId.innerHTML= "hi";
}
</script>
-------------------------------------------------------------------------------------------------------------------------
REMOVE FRONTEND HTML ELEMENT BY JAVASCRIPT ON LIVE PAGE WITH CONSOLE
PANNELOR
<div id="two"> </div>
document.querySelector('#two').remove();
OR BODY TAG REMOVE
<body> <div class="two"> </div> </body> body>
document.querySelector('body').remove();
<div class="two"> </div>
document.querySelector('.two').remove();
READ MORE:
https://jsfiddle.net/52kp584L/310/
https://blog.mrfrontend.org/2017/10/javascript-basics-add-remove-elements-vanilla-javascript/
--------------------------------------------------------------------------------------------------------------------------
document.querySelector('.two').remove();
--------------------------------------------------------------------------------------------------------------------------
Read More:
Write a JavaScript to write out the multiplication table
https://www.ques10.com/p/29127/write-a-javascript-to-write-out-the-multiplication/
Please Choose the number you would like to see the multiplication table for
--------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>Multiplication Table</title>
</head>
<body>
<h3>Multiplication Table For Number 5</h3>
<script type ="text/javascript">
var t=5;
var i=1;
while(i<=20)
{
document.write(t+ " X " +i+ " = " +i*t+ "<br>");
i++;
}
</script>
</body>
</html>--------------------------------------------------------------------------------------------------------------------------
<body>
<h1>Please Choose the number you would like to see the multiplication table for:</h1>
<!-- https://codepen.io/michaelwright74/pen/POoNWE -->
<div class="center">
<select id="number" name="number">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<button id="button">Submit</button>
</div>
<div class="output" id="output"></div>
<script >
let num;
let outputList = document.querySelector(".output");
document.getElementById("button").onclick = function() {
num = Number(document.getElementById("number").value);
document.getElementById("output").innerText = "";
for (let i = 1; i <= 12; i++) {
let outputData = document.createElement('div');
outputData.innerText = `${num} * ${i} = ${num * i}`;
outputList.appendChild(outputData);
}
}
</script>
</body>
--------------------------------------------------------------------------------------------------------------------------
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment