We Keep Coding

javaSript function parameters [duplicate]

This question already has answers here:
How to pass arguments to addEventListener listener function?
(36 answers)
addEventListener("click",...) firing immediately [duplicate]
(3 answers)
Closed last month.
I have an input field that I want to delete the value of onblur so ,I wrote a function to do so , it's not working for some reason .
HTML
<input class="add-class" type="text">
javaScript
let addClassInput = document.querySelector(".add-class");
let deleteOnblur = function (ele) {
ele.value = ""
};
addClassInput.addEventListener("blur", deleteOnblur(addClassInput));
It works when I do ...
let deleteOnblur = function () {
addClassInput.value = ""
};
addClassInput.addEventListener("blur", deleteOnblur);

Javascript to change color of all spans with certain ID [duplicate]

This question already has answers here:
Mulitple Elements with the same ID
(5 answers)
Closed 2 years ago.
I have the following code to change the color of text with a certain spanID. Currently, it only changes the first instance of the span and on subsequent instances. Any suggestions?
<script>
function spanColor() {
var x = document.getElementById('someId');
x.style.color = '#'+Math.random().toString(16).substr(-6);
}
</script>

If you want to return all the needed elements you should use querySelectorAll(#id)
But as you saw in the comments - ID is not the best way to get more than one item.

You should change the ID for a ClassName and use var x = document.getElementsByClassName("example");
So your code should look like this:
<script>
function spanColor() {
var x = document.getElementsByClassName('someClassname');
var i;
for (i = 0; i < x.length; i++) {
x[i].style.color = '#'+Math.random().toString(16).substr(-6);
}
}
</script>

Index based argument in for loop of addEventListener [duplicate]

This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Javascript infamous Loop issue? [duplicate]
(5 answers)
Closed 2 years ago.
I am adding some JS to an HTML, and I have a fragment of code similar to this:
<script>
function ButtonAction(index){
alert("My index is: "+index);
if(window_big){
// Use index to do something
}
else{
// Use index to do something else
}
}
function WindowResize(){
if(window.innerWidth > 1200){
window_big = true;
}
else{
window_big = false;
}
}
var window_big;
if(window.innerWidth > 1200){
window_big = true;
}
else{
window_big = false;
}
buttons = document.getElementsByClassName('MyButtons')
var i;
for (i = 0; i < buttons.length; i++) {
alert(i);
buttons[i].addEventListener("click",function(){ButtonAction(i);},false);
}
window.onresize = WindowResize;
</script>
The idea can be summarized like this:
There is a series of buttons in the page, stored in buttons[].
If the window is bigger than a certain size, those buttons should do one action, and if not, do another one.
To do said actions, I need the button[x].id. In fact, the initial intention was to set the listener to:
buttons[i].addEventListener("click",function(){ButtonAction(i);},false);
The problem is that I cannot retrieve the id, because the argument passed in the event listener seems to be always the last value i was set to.
May I ask for some help, please?

update eventListener on shallow copy/clones [duplicate]

This question already has answers here:
Event Delegation Pattern with addEventListener and nested elements in buttons
(1 answer)
Implementing jQuery's "live" binder with native Javascript
(4 answers)
Closed 3 years ago.
Question: How do I make my eventListeners on buttons of clones active?
Explanation: I am building a plugin using HTML,CSS and Vanilla Javascript (required, no jquery or other libraries). One of the features is to have multiple addresses for a program of an Organization. Also, an organization can have multiple programs.
Visual:
(simple) Org > Program [Address]
(complex) Org > Program [Address, Address1], Program1 [Address2, Address3]
The button for creating a new address is in the address form itself because it needs to append to the same program it is in. The problem is I am losing the "add address" button's function on the clones. I know I need to update the Javascript's addEventListeners for the new HTML buttons. I know it is literally just calling the same function over again, but I don't want to create a loop and I feel like that is a bad practice.
Sorry if this is a novice question, I don't have a sr to help me
Code::
var addProgramButton = document.getElementById("cloneAddress")
for (var i = 0; i < addProgramButton.length; i++){
//code that clones and appends
// Right now I am just calling the same thing again
// var addProgramButton = document.getElementById("clone...)
}
*Thank you for those who contributed. What Is working
// The initial Listener
var cloner2 =
document.getElementsByClassName('cloneProgramDetailsButton')
for (var i = 0; i < cloner2.length; i++){
cloner2[i].addEventListener('click', function(e){
addAddress(e)
})
}
//Function for cloning
function addAddress(event){
console.log("did this trigger it", event)
var boxes = document.getElementById("cloneProgramDetails");
var clone = boxes.cloneNode(true);
var inputElements = clone.querySelectorAll("input");
for(var i = 0; i < inputElements.length; i++){
inputElements[i].value = '';
var nameBuilding = inputElements[i].name.split('_')
if(nameBuilding.length > 1){
inputElements[i].name = nameBuilding[0] +
myTicker + "_" + nameBuilding[1];
} else {
inputElements[i].name = nameBuilding[0] +
myTicker
}
}
event.originalTarget.parentNode.parentNode.parentNode.appendChild(clone)
var cloner2 = document.getElementsByClassName('cloneProgramDetailsButton')
for (var i = 0; i < cloner2.length; i++){
cloner2[i].addEventListener('click', function(e){
addAddress(e)
})
}
}

Javascript - update all divs of the same class in a loop [duplicate]

This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
How do I add a delay in a JavaScript loop?
(32 answers)
Closed 5 years ago.
I am trying to update CSS for all divs (one by one) with a certain class using plain Javascript loop. Here it is:
var timerCoinRow = 0;
var rows = document.querySelectorAll('.coin-row');
for (var i=0; i<rows.length; i++)
{
timerCoinRow += 500;
obj = rows[i];
setTimeout(function ()
{
obj.style.opacity = 1;
}, timerCoinRow);
}
for some reason it does not work. here is JQuery version that works fine but I need it in plain "vanilla" Javascript:
var timerCoinRow = 0;
$('.coin-row').each(function ()
{
timerCoinRow += 500);
var obj =$(this);
setTimeout(function ()
{
obj.css('opacity', '1');
},timerCoinRow,obj);
});
When I place obj.style.opacity = 1; outside the timeout - all divs are updated but simultaneously while I need them to appear one after another with a pause of 500ms. Please help - it's somewhere near but ....