TOGGLE BUTTON JAVA SCRIPT

Friday, 17 August 2018

TOGGLE BUTTON JAVA SCRIPT

----------------------------------------------------------------------------------------------------------------------------------

TOGGLE BUTTON JAVA SCRIPT CODE
https://www.w3schools.com/JS

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_text

https://www.jquery-az.com/jquery-toggle-method-showhide-elements-6-examples/

https://codepen.io/mehsatek/pen/rqVayw

-----------------------------------------------------------------------------------------------------------------------------------

<button id="ButtonId">Button</button>

TextBox.innerHTML = " ";

ButtonId.onclick = function(){

if (TextBox.innerHTML == " ") {

TextBox.innerHTML = "HI";

}

else {

TextBox.innerHTML = " ";

}

</script>

OTHER CODE

<button id="OnClick">Button</button>

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 SYMBOL
DOCUMENT 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>

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>

ListenerVariable.onclick = function(){ButtonId.innerHTML= "hi";}</script>

-------------------------------------------------------------------------------------------------------------

<button id="ButtonId">BUTTON</button>

ListenerVariable.onclick = function(){ document.querySelector("button").innerHTML= "hi";}</script>

------------------------------------------------------------------------------------------------------------

<button id="ButtonId">BUTTON</button>

var ListenerVariable = document.querySelector("#ButtonId");

ListenerVariable.onclick = function(){

ButtonId.innerHTML= "hi";

}

</script>

--------------------------------------------------------------------------------------------------------------

<button id="ButtonId">BUTTON</button>

var ListenerVariable = document.querySelector("#ButtonId");

ButtonId.onclick = function(){

ButtonId.innerHTML= "hi";

}

</script>

-------------------------------------------------------------------------------------------------------------

<button class="ButtonClass">BUTTON</button>

var ListenerVariable = document.querySelector(".ButtonClass");

ListenerVariable.onclick = function() {

ListenerVariable.innerHTML= "hi";

};

</script>

------------------------------------------------------------------------------------------------------------

WHEN WE USE LISTENER VARIABLE
BASIC DOCUMENT QUERY SELECTOR USE FOR LISTENER
AND WORKS WITH TAG

------------------------------------------------------------------------------------------------------------

<button id="ButtonId">BUTTON</button>

var ListenerVariable = document.querySelector("button");

ListenerVariable.onclick = function(){

ButtonId.innerHTML= "hi";

</script>

--------------------------------------------------------------------------------------------------------------

<button id="ButtonId">BUTTON</button>

var ListenerVariable = document.querySelectorAll("button");

ListenerVariable[0].onclick = function(){

ButtonId.innerHTML= "hi";

}

</script>

----------------------------------------------------------------------------------------------------------

<button id="ButtonId">BUTTON</button>

ListenerVariable.onclick = function(){
document.querySelector("button");.innerHTML= "hi";
}
</script>

--------------------------------------------------------------------------------------------------------------

<button id="ButtonId">BUTTON</button>

var ListenerVariable = document.querySelectorAll("#ButtonId");

ListenerVariable[0].onclick = function(){

ButtonId.innerHTML= "hi";

}

</script>

-------------------------------------------------------------------------------------------------------------------------

<button id="ButtonId">BUTTON</button>

ButtonId.onclick = function(){

ButtonId.innerHTML= "hi";

}

</script>

-----------------------------------------------------------------------------------------------------------------------

<button id="ButtonId">BUTTON</button>

var ListenerVariable = document.getElementsByTagName("button");

ListenerVariable[0].onclick=function(){

ButtonId.innerHTML= "hi";

}

</script>

-------------------------------------------------------------------------------------------------------------------------

REMOVE FRONTEND HTML ELEMENT BY JAVASCRIPT ON LIVE PAGE WITH CONSOLE

PANNEL

<div class="two"> </div>

document.querySelector('.two').remove();
OR
<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();

--------------------------------------------------------------------------------------------------------------------------

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>

</select>

<button id="button">Submit</button>

</div>

let num;

let outputList = document.querySelector(".output");

document.getElementById("button").onclick = function() {

num = Number(document.getElementById("number").value);

document.getElementById("output").innerText = "";