Develop Reference

How do I capitalize all text in a document using the DOM and the toUpperCase function? [duplicate]

This question already has answers here:
textContent and innerHTML not changing the DOM
(3 answers)
Closed 1 year ago.
I want to capitalize every single paragraph in a website using the document.querySelectorAll() function.
I don't know what parameter to choose so I can get an array of all the texts.
Here is my Code:
var txtArr = document.querySelectorAll("p");
function capitalize(txtArr){
for (var i = 0; i < txtArr.length; i++){
txtArr[i].textContent.toUpperCase();
}
}
capitalize(txtArr);

Maybe try
var txtArr = Array.from(document.querySelectorAll("p"));
function capitalize(txtArr) {
for (var i = 0; i < txtArr.length; i++){
txtArr[i].textContent = txtArr[i].textContent.toUpperCase();
}
}
capitalize(txtArr);

Object programming in javascript to iteratively create and manipulate CSS attributes of HTML elements [duplicate]

This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
Template literals like 'some ${string}' or "some ${string}" are not working
(7 answers)
Closed 1 year ago.
I'm having big trouble creating several buttons each with a different id named based on the state of a for loop. I'm sorry, I'm having a hard time describing this with words but I'm pretty sure the code below will make sense:
function newButton() {
return button = '<button id=" ${this.playerNumber} "></button>';
}
function Player(playerNumber, timeout, sec) {
this.playerNumber = playerNumber;
this.timeout = timeout;
this.sec =sec;
this.div = document.createElement("div");
this.newButton = newButton;
}
var newPlayerNode = document.getElementById('newPlayerNode');
var players =[];
for (var i = 0; i < numberOfPlayers; i++) {
players[i] = new Player(i,0,parseInt(turnLength));
players[i].div.innerHTML = players[i].newButton();
newPlayerNode.appendChild(players[i].div);
}
Indeed, the final HTML result still has the id <button id=" ${this.playerNumber} .... instead of replacing the id with the playernumber (0, 1, etc.)

I'm trying to get this simple vanilla JS work in IE11/10 [duplicate]

This question already has answers here:
JS ForEach Loops in IE11
(4 answers)
Closed 3 years ago.
The script works everywhere but IE, I tried to google about it but all I could find is that forEach is not supported by IE, but I am not sure what loop to use to repalce this. Can someone help with this? Here is the code:
const liwraps = document.querySelectorAll('.subpage-menu-li.submenu_has_children');
liwraps.forEach(function(liwrap){
const arwdrp = liwrap.querySelector('.arrow-drop'),
ulsub = liwrap.querySelector('.subpage-submenu-ul'),
ulsubp = ulsub.parentElement
if(ulsubp.classList.contains('current_page_item', 'current_page_parent') || ulsubp.classList.contains('current_page_parent')){
ulsub.classList.add('active-subpage-submenu');
arwdrp.classList.add('rotaten');
}
if(arwdrp){
arwdrp.addEventListener("click", function(){
ulsub.classList.toggle('active-subpage-submenu');
arwdrp.classList.toggle('rotaten');
});
};
});

You can use normal for loop.
for (var i = 0, n = liwraps.length; i < n; ++i) {
var liwrap = liwraps[i];
// your function code goes here
}

Passing a variable to a click function created in for loop [duplicate]

This question already has answers here:
Javascript multiple dynamic addEventListener created in for loop - passing parameters not working
(5 answers)
Closed 7 years ago.
Basically I created a bunch of cells and I am trying to add onclick to each one passing a variable to use inside the function. But doing straight up passes the 'i' variable as the last i value and not 0,1,2,3,4 etc. Here is a snippet of what I am doing.
for (var i = 0; i < cellCount.length; i++) {
var cellName= "cell"+ i
document.getElementById(cellName).onclick = function () { cellClicked(i) };
}

If you do not "capture" the value in a new scope, the callback will read the value from the actual i-counter.
Do something like this:
for (var i = 0; i < cellCount.length; i++) {
(function(copy_of_i) {
var cellName= "cell"+ i
document.getElementById(cellName).onclick = function () { cellClicked(copy_of_i) };
})(i)
}

tried to change the inner element of dynamic div through class name but its not working [duplicate]

This question already has answers here:
How to use getElementsByClassName in javascript-function? [duplicate]
(3 answers)
Closed 8 years ago.
I have create the dynamic div and now trying to change the inner html of it but its not working please help me here is the code
function like(id)
{
var orgnldiv=document.getElementById(id);
var ndiv=document.createElement('DIV');
ndiv.id = 'like';
ndiv.className="likeclass";
var classname = document.getElementsByClassName("likeclass");
orgnldiv.appendChild(ndiv);
classname.innerHTML="example";
//alert(id);
}

Beware of the s in Elements. That means that you are getting a list rather than a single control.
Check How to use getElementsByClassName in javascript-function?

Use this:
function like(id)
{
var orgnldiv=document.getElementById(id);
var ndiv=document.createElement('DIV');
ndiv.id = 'like';
ndiv.className="likeclass";
orgnldiv.appendChild(ndiv);
var elements = document.getElementsByClassName("likeclass");
for(var i = 0; i < elements.length; i++) {
elements[i].innerHTML="example";
}
}
You get error because getElementsByClassName returns array of elements, not one elements. So you have to work with result like with array. If 1 element return loop will fire only 1 time. If 0 elements it wouldn't fire.
Hope this will help.