仅第二次点击更新添加javascript元素

我有一些Javascript代码从一个处理来自服务器的http响应的数组中获取值，并将按钮添加到模式窗口。所以按钮的ID来自阵列。第二次点击一切都很好，我的按钮被添加到模态窗口。但是当我在下次再次添加按钮时调用该函数时，它应该只更新按钮。我该如何处理该功能只会更新第二次和更多次点击的按钮？仅第二次点击更新添加javascript元素

buttonContainer = document.getElementById('modal1');     
     for (i = 0; i < resultContainers.length; i++) { 
      newButton = document.createElement('input'); 
      newButton.type = 'button'; 
      newButton.value = resultContainers[i]; 
      newButton.id = resultContainerValues[i]; 
      newButton.class = 'buttonContainer'; 
       if (newButton.id == 'true') { 
        newButton.style.backgroundColor = '#8cff1a'; 
       }; 
      newButton.onclick = function() { 
       alert('You pressed '+this.id); 
      }; 
      buttonContainer.appendChild(newButton);

来源

2016-07-31 Tmyr

在这种情况下，您需要检查按钮是否已经存在，然后再添加它。既然你知道你要创建的按钮的ID，你可以看看是否已经有一个具有该ID的按钮，而只是更新它。

var newButton = document.getElementById(resultContainerValues[i]); 
if(newButton!=null) { 
    newButton.value = resultContainers[i]; 
} else { 
    newButton = document.createElement('input'); 
    newButton.type = 'button'; 
    newButton.value = resultContainers[i]; 
    newButton.id = resultContainerValues[i]; 
    newButton.class = 'buttonContainer'; 
    if (newButton.id == 'true') { 
     newButton.style.backgroundColor = '#8cff1a'; 
    } 
    newButton.onclick = function() { 
     alert('You pressed '+this.id); 
    }; 
    buttonContainer.appendChild(newButton); 
}

来源

2016-07-31 15:34:57 kamoroso94

谢谢你的帮助，但是当我第二次加载函数时，按钮将被重新添加。我想要的是，并非所有的按钮都会再次添加，但按钮应该更新，每个按钮只存在一次。有没有可能以简单的方式做到这一点？ @ kamoroso94 – Tmyr

我想我可能对你的问题的一些细节模糊不清。我做了一个JSFiddle示例，它显示了我希望你在寻找的东西。如果没有，也许你可以用更多的细节更新你的问题？ https://jsfiddle.net/x5k57o01/ – kamoroso94

这真的没有告诉我更多关于你遇到的问题。你提到按钮不断重复。你什么时候调用这段代码，你在哪里得到'resultContainers'和'resultContainerValues'变量的值？ – kamoroso94

仅第二次点击更新添加javascript元素

回答

相关问题