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>
--------------------------------------------------------------------------------------------------------------------------
Related Post for TOGGLE BUTTON JAVA SCRIPT
FLASH 8 DOWNLOAD
BLOG ZOOM EFFECT THUMBNAIL
HOW TO CRACK ANY SOFTWARE
BRICK WALL MENU BAR CODE
CTX STYLE
URL EXTRACTOR
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES
FLICKITY SLIDER SCROLL WITH RADIO NEXT PREV BUTTON
GOOGLE DICTIONARY
FIREBUG LITE USE OFFLINE
FLICKITY JS CSS SLIDER
Direct Links to your Files on Google Drive
IMPORT HTML FILE
WHACK A RAT CSS GAME
IMPORT LOAD CSS FILES IN CSS FILE
GOOGLE FILTER BUTTON IN IMAGE SEARCH
ALPHABET GAME JEUX LULU
RADIO BUTTON SLIDER TO KEY FRAME SLIDER
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.