To see another more problematic scoping issue with var, run

Question

To see another more problematic scoping issue with var, run

this code on any webpage. It replaces the entire contents with eight buttons. The first four are looped over using var. The next four are looped using let. Try clicking them. Is the alert what you expect?
// DO NOT USE innerHTML! This is solely to make a simple demo!
document.body.innerHTML = "<div class=\"var\"><p>var</p><button>1</button><button>2</button><button>3</button><button>4</button></div><div class=\"let\"><p>let</p><button>1</button><button>2</button><button>3</button><button>4</button></div>";

const varButtons = document.querySelectorAll(".var button");

for (var i = 1; i <= 4; i++) {
varButtons[i-1].addEventListener("click", () => alert(i));
}

const letButtons = document.querySelectorAll(".let button");

for (let i = 1; i <= 4; i++) {
letButtons[i-1].addEventListener("click", () => alert(i));
}

0

03.11.2023

4 ответов

24 просмотра

ＭＵＴＨＵ・ＫＵＭＡＲ「メーカー」 🔺

Anon
I still don't get the problem with innerHTML. It's...

If you insert *any* user-generated content with innerHTML, you may be susceptible to XSS

0

03.11.2023

Anon

ＭＵＴＨＵ・ＫＵＭＡＲ「メーカー」 🔺
If you insert *any* user-generated content with in...

But users on the front end can do whatever they want and insert anything anywhere. I only use them to insert content myself in a function for instance

0

03.11.2023

ＭＵＴＨＵ・ＫＵＭＡＲ「メーカー」 🔺

Anon
But users on the front end can do whatever they wa...

Content from one user can XSS another user, for example

0

04.11.2023

Anon · Accepted Answer

Anon

I still don't get the problem with innerHTML. It's awesome if you just want to insert a string html node inside the element. *I know insertAdjacentHTML exist

0

03.11.2023

Похожие чаты

To see another more problematic scoping issue with var, run

4 ответов

Похожие вопросы