We Keep Coding

How do I prevent all buttons from getting clicked in a loop?

So, I want to show some details when I click the details button. I have used for loop to loop through the buttons but it makes it so that when I click a single button, rest of the buttons get clicked as well. I understand it happens because of the for loop. But how do I make all the buttons clickable using a loop but prevent all of them from getting clicked when I click one?
I'm super new to JavaScript.
function showDetails() {
for (let i = 0; i < allProducts.length; i++) {
const getHiddenDescription = document.getElementsByClassName("details");
getHiddenDescription[i].style = "display: block";
console.log("clicked");
}
}
const getDetails = document.querySelectorAll(".btn-details");
for (let i = 0; i < allProducts.length; i++) {
getDetails[i].addEventListener("click", showDetails);
}

You can select the button which triggered the event listener by using an optional parameter available in the event listener callback, often named event, like so.
function showDetails(event) {
clickedButton = event.currentTarget;
clickedbutton.style = "display: block";
}

Javascript Vanilla - Double Click event handler on inputs / GetElementsByTagName

Problem: Can't assign a double-click event handler to my generated inputs; is this feasible using the getElementsByTagName?
Thanks for any help
Here is the code:
Generated inputs
function list_tasks() {
let container = document.getElementById("todo");
container.innerHTML = ""
if (task_array.length > 0) {
for (let i = 0; i < task_array.length; i++) {
let input = document.createElement("input");
input.value = task_array[i];
input.classList.add("record");
input.disabled = true;
container.appendChild(input);
}
}
}
Attaching the event
document.getElementsByClassName("record").addEventListener("dblclick", editTask);
And the console.log is never called
function editTask(e){
console.log("double click")
}
Update
Trying to loop across the array, but still, no double click event is fired
let record = document.getElementsByClassName("record");
for(var i = 0; i <= record.length; i++){
document.getElementsByClassName("record")[i].addEventListener("dblclick", editTask);
}

getElementsByClassName returns a nodes list i.e. an array. To access the element you need to get the value form the array.
Try this:
document.getElementsByClassName("record")[0].addEventListener("dblclick", editTask);
This should work.

The reason why this doesn't work is because you are marking the inputs as disabled. Disabled inputs don't react to some events, and looks like double-click is one of them.
Also, as #Royson wrote, getElementsByClassName() returns a list of multiple elements. If you want to add an event listener to all of them you have 2 options:
The best one IMO, if possible, is to attach it while creating the elements in list_tasks() function:
let input = document.createElement("input");
input.value = task_array[i];
input.classList.add("record");
input.disabled = true;
input.addEventListener("dblclick", editTask); // <--- here
container.appendChild(input);
If this is not possible to due scopes being inaccessible, you just loop over the result of getElementsByClassName():
Array.from(document.getElementsByClassName("record")).forEach(el => el.addEventListener("dblclick", editTask));
Edit: The spec says that "click" events should be disabled on a disabled input. Event though double-click isn't specified directly, my guess is that it's implied by it being a click too, or it requires click to be enabled so it can catch two fast ones.
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls%3A-the-disabled-attribute

The way to do it is to create items as list items and then make contentEditable on the list items on double click B-)

How to get this code to work by calling event on Div instead of button?

I wrote a little web app todo list. I am trying to run an eventListener on my customizeDiv but for some reason the code won't work.
Description of program:
This todo list will allow the user to add tasks to a list, but the code provided has to do with customization of the list. The user can click 'customize list' which will then create another button called 'List Color' (the only option right now). Once clicked an input field will appear allowing the user to enter a color, changing the background color of the body element.
Right now I have nested event listeners but I heard this is not good practice. This program currently works using nested event listeners. I am trying to avoid that and also am trying to find out why I can't get it to work when using an event listener on the customizeDiv instead of the customizeButton initially. Here are all declared variables being used:
//Div containing all customization buttons
const customizeDiv = document.getElementById('customization');
/*This button allows the user to select what part of the list they want
to customize, right now it only contains one button 'List Color'. When
clicked, the user will enter a color into an input text field, changing
the background-color of the body.*/
const customizeButton = document.createElement('button');
customizeButton.textContent = 'Customize your list';
customizeDiv.appendChild(customizeButton);
//Event listener on the customization button
customizeButton.addEventListener('click', function() {
const colorButton = createButtonOnMenu('button', 'textContent', 'List Color');
customizeDiv.removeChild(customizeDiv.firstChild);
customizeDiv.appendChild(colorButton);
//Event listener when user selects to change list color
colorButton.addEventListener('click', function() {
//Create the necessary elements to create new text submit.
const colorForm = document.createElement('form');
const colorInput = document.createElement('input');
const colorChangeButton = document.createElement('button');
colorChangeButton.type = 'submit';
colorChangeButton.textContent = 'Submit Color';
colorChangeButton.id = 'setColor';
colorInput.type = 'text';
colorInput.placeholder = 'Enter Color';
colorInput.id = "colorInput";
colorForm.id = "colorForm";
colorForm.appendChild(colorInput);
customizeDiv.appendChild(colorForm);
customizeDiv.removeChild(colorButton);
customizeDiv.addEventListener('submit', (e) => {
e.preventDefault();
const body = document.getElementById('myBody');
if(colorInput.value === ''){
alert('Please enter a valid color!');
}else {
body.style.backgroundColor = colorInput.value;
if(colorForm.parentNode){
customizeDiv.removeChild(colorForm);
customizeDiv.appendChild(customizeButton);
}
}
});
});
});

Java script function gets called when i pass arguments

I have created a dynamic button when that button gets clicked it will invoke a javascript function with an arguments but the other lines are getting skipped during this process
function mainradio() {
var dyndiv = document.createElement("div");
dyndiv.id = "div_temp";
var dynradiogroup = document.createElement("label");
dynradiogroup.name="rdlbl";
dynradiogroup.className="rdmainclass";
dynradiogroup.innerHTML="Please enter your question";
var nextradio = document.createElement("input");
nextradio.type="button";
nextradio.id="nxtbtnid";
nextradio.name="nxtbtnnme";
nextradio.value="Add more button";
nextradio.onclick =createRadio(dyndiv.id);
dyndiv.appendChild(dynradiogroup);
dyndiv.appendChild(nextradio);
document.getElementById("dynElements").appendChild(dyndiv);
}
the dynamically created label and button are not attached to the div that was also created dynamically
dyndiv.appendChild(dynradiogroup);
dyndiv.appendChild(nextradio);
document.getElementById("dynElements").appendChild(dyndiv);
function get invoked before these 3 statements gets executed.

Use nextradio.onclick = createRadio.bind(this, dyndiv.id); or nextradio.onclick = () => { createRadio(dyndiv.id); };

Dynamically created form called via onclick disappears immediately Javascript

I have dynamically created a button in my Javascript function and called another function onclick, as shown below.
streambtn = document.createElement("button");
streambtn.setAttribute("onclick","createattribute()");
The createattribute() method opens a subdivision within the dynamically created form and this function is as follows.
function createattribute() {
inputval.innerHTML = "Provide a Stream name and click to add attribute-type pairs to yours stream.";
var input = document.createElement("input");
input.type = "text";
input.placeholder="Attribute name";
input.id="attr"+attrID;
input.className = "attr-textfield-style";
inputval.appendChild(input);
//Display the drop down menu
var newDiv=document.createElement('div');
var html = '<select>', attrtypes = typeGenerate(), i;
for(i = 0; i < attrtypes.length; i++) {
html += "<option value='"+attrtypes[i]+"'>"+attrtypes[i]+"</option>";
}
html += '</select>';
newDiv.className="attr-combobox-style";
newDiv.id="type"+attrID;
newDiv.innerHTML= html;
inputval.appendChild(newDiv);
attrID++;
alert("attrname id: "+input.id+" attrtype id: "+ newDiv.id);
}
The inputval is a division within the dynamically created form where the newly created form elements from the createattribute() function will be appended to. But the issue that I'm facing right now, is that though the method is correctly called, the form(dynamically created form) immediately disappears in a split second once the streambtn is clicked. Once it is clicked, it displays the first line "Provide a Stream name and click to add attribute-type pairs to yours stream." in a flash and disappears. Is there a way to keep it onscreen and then hide it depending on any conditions(like after the user finishes entering the data corresponding to that newly opened form-> created via createattribute() method)?

Add type = "button" as <button> without type = "button" will act as submit button and over click of the submit buttopn, page will be unloaded.
streambtn = document.createElement("button");
streambtn.type = 'button';
streambtn.setAttribute("onclick","createattribute()");