How do I access createElements variable inside a function?

Viewed 49

I have a question, how can I access or target these createdElement variables inside this function, within another function?

function addRow(rowNumber) {

const bet_label = document.createElement("label");
a.appendChild(bet_label);
  bet_label.classList.add('betLabel'); 
  bet_label.textContent = "Bet " + rowNumber;
  
const input_field = document.createElement("input");
a.appendChild(input_field);
  input_field.classList.add('oddsEntry'); 
  input_field.type = "number";

const input_div = document.createElement("input");
a.appendChild(input_div);
  input_div.classList.add('stakeEntry'); 
  input_div.type = "number";

result_div = document.createElement("div");
a.appendChild(result_div)
  result_div.classList.add('resultDiv');
  result_div.textContent = "";

const btn_Del = document.createElement("button");
  btn_Del.classList.add('deleteBtn');
  btn_Del.innerHTML = '<i class="fa-solid fa-trash"></i>';
  a.appendChild(btn_Del);

}

1 Answers

You need to expose these variables by returning them from the function. You can return them in an object, e.g. return { bet_label, input_field, input_div };, so when the function is called it will return an object containing references to these elements.

function addRow(rowNumber) {

  const bet_label = document.createElement("label");
  a.appendChild(bet_label);
  bet_label.classList.add('betLabel');
  bet_label.textContent = "Bet " + rowNumber;

  const input_field = document.createElement("input");
  a.appendChild(input_field);
  input_field.classList.add('oddsEntry');
  input_field.type = "number";

  const input_div = document.createElement("input");
  a.appendChild(input_div);
  input_div.classList.add('stakeEntry');
  input_div.type = "number";

  const result_div = document.createElement("div");
  a.appendChild(result_div)
  result_div.classList.add('resultDiv');
  result_div.textContent = "";

  const btn_Del = document.createElement("button");
  btn_Del.classList.add('deleteBtn');
  btn_Del.innerHTML = '<i class="fa-solid fa-trash"></i>';
  a.appendChild(btn_Del);

  return {
    bet_label,
    input_field,
    input_div,
    result_div,
    btn_Del
  };
}
Related