Блог

Я скопировал калькулятор Windows. Я застрял на «вкладке памяти».

Мне нужно создать события нажатия на три кнопки: MC M M- как показано ниже (в правом верхнем углу экрана).

Проблема в том, что эти кнопки (и все элементы вокруг) создаются впоследствии каждый раз, когда я нажимаю «MS» на главном калькуляторе (слева от экрана, над основными кнопками).

 function addMemoryValue(){
  const uls = document.createElement("ul");
  const lis = document.createElement("li");
  const h2s = document.createElement("h2");
  h2s.textContent = Number(display.textContent);
  const h3s = document.createElement("h3");

  uls.appendChild(lis);
  lis.appendChild(h2s);
  h2s.appendChild(h3s);

  let valueBtn = ["MC", "M ", "M-"];

  valueBtn.forEach((element) => {
  const memoryBtn = document.createElement("button");
  memoryBtn.setAttribute("value", element);
  memoryBtn.textContent = element;
  const memorySpn = document.createElement("span");
  memorySpn.appendChild(memoryBtn);
  memoryBtn.classList.add("btnsave");
  h3s.appendChild(memorySpn);

  const buttonTest = document.getElementsByClassName("btnsave");
  console.log(buttonTest.textContent);
  })
 

Я хочу повторить эти кнопки и создать операторы if в соответствии с textContent, но я не уверен, как настроить таргетинг на кнопки, поскольку они еще не существуют.

Если, например, я попробую следующее:

 const buttonTest = document.getElementsByClassName("btnsave");
console.log(buttonTest.textContent);
 

Я получаю «неопределенный» независимо от того, есть ли консоль.журнал находится внутри или вне функции.

Вы можете добавлять обработчики событий щелчка непосредственно там, где вы создаете кнопки, подобные этой:

 var clickHandler = function() {
    console.log("button clicked");
};

var button = document.createElement("button");
button.textContent = "test";
button.addEventListener("click", clickHandler);

document.getElementById("container").appendChild(button); 

 <div id="container">

</div> 

Обновление после комментария OPs:

Этот фрагмент создаст три кнопки при нажатии кнопки и добавит к ним три разных обработчика событий.

 var createButton = function(title, clickHandler) {
    var button = document.createElement("button");
    button.textContent = title;
    button.addEventListener("click", clickHandler);

    return button;
};

var removeButtons = function() {
    var container = document.getElementById('container');
    
    while (container.firstChild) {
      container.removeChild(container.lastChild);
    }
};

var createButtons = function() {
    removeButtons();
    
    var container = document.getElementById('container');
    
    container.appendChild(createButton("button 1", () => console.log("button 1 clicked")));
    container.appendChild(createButton("button 2", () => console.log("button 2 clicked")));
    container.appendChild(createButton("button 3", () => console.log("button 3 clicked")));
};

document.getElementById('create').addEventListener("click", createButtons);
document.getElementById('remove').addEventListener("click", removeButtons); 

 #container {
  border: 1px dashed teal;
  min-height: 1em;
} 

 <button id="create">create buttons</button>
<button id="remove">remove buttons</button>

<div id="container"></div>