Thursday, 14 August 2025
Let and Var Loop Are Different


______________________________________________
Let Loop Var Loop Are Different when We
Use Let loop We Can Use buttons[i]or this
buttons[i].style.visibility = "hidden";
this.style.visibility = "hidden";
But when We Use Var Loop
for (var i = 0; i < buttons.length; i++) {
We Can Only Use
this.style.visibility = "hidden";
We Can Write button Query selector line
var buttons = [ ...document.querySelectorAll('[id="btn1"]'), ...document.querySelectorAll('[id="btn2"]') ];
Or Write In This Way
var buttons = Array.from(document.querySelectorAll("#btn1,#btn2"));
Or Write In This Way
var buttons = document.querySelectorAll("#btn1,#btn2");
Or Write In This Way
var allButtons = document.querySelectorAll("button");
var btn1 = allButtons[0];
var btn1_again = allButtons[1];
var btn2 = allButtons[2];
var btn2_again = allButtons[3];
var buttons = [btn1, btn1_again, btn2, btn2_again];
Or Write In This Way
var btn1Elements = document.querySelectorAll('[id="btn1"]');
var btn2Elements = document.querySelectorAll('[id="btn2"]');
var buttons = [
btn1Elements[0], // First btn1
btn1Elements[1], // Second btn1
btn2Elements[0], // First btn2
btn2Elements[1] // Second btn2
];
______________________________________________
We Use Simple Button Click Function With Argument Button
<button id="btn1">Button 1</button>
<script>
btn1.onclick = function() {
btn1.style.visibility = 'hidden';
// Or Use this
//this.style.visibility = 'hidden';
}
</script>
______________________________________________
<button id="btn1" onclick="Fn1(this)">Button 1</button>
<button id="btn1" onclick="Fn1(this)">Button 1</button>
<script>
function Fn1(button) {
button.style.visibility = 'hidden';
}
</script>
___________________________________________________
<button id="btn1">Button 1</button>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn2">Button 2</button>
<script>
var buttons=document.querySelectorAll("button")
for (let i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
buttons[i].style.visibility = "hidden";
};
}
</script>
___________________________________________________
0 comments:
Post a Comment