我應該在哪裏放置replaceChild（），以便它取代現有的div

Question

我是編程新手，最近開始學習JavaScript。我製作了一個帶HSL顏色值的小程序，並顯示該顏色的所有飽和度值。目前，當用戶第二次或第三次輸入輸入值時，它會創建一個新的div（嘗試在JSFiddle示例中第二次或第三次輸入值）。我想要的是，當用戶第二次或第三次輸入值而不是每次創建新的div時應該替換現有的div。我熟悉replaceChild（）方法，但不知道它應該放在哪裏。

這裏是我的代碼：

var satInput = document.createElement("input"); 
var satButton = document.createElement("button"); 

satInput.setAttribute("placeholder", "Write a number between 0 to 360"); 
satInput.setAttribute("size", "30") 
satButton.innerHTML = "Submit"; 

document.body.appendChild(satInput); 
document.body.appendChild(satButton); 

var saturation = function() { 

    if (satInput.value !== "" && satInput.value >= 0 && satInput.value <= 360) { 

     var background = document.createElement("div"); 
     background.id = "bg"; 
     document.body.appendChild(background); 

     for (var i = 0; i <= 100; i++) { 
      var childDiv = document.createElement("div"); 
      childDiv.id = "color"; 
      background.appendChild(childDiv); 
      childDiv.style.backgroundColor = "hsl(" + satInput.value + "," + i + "%, 50%)"; 
     } 

    } else { 
     alert("Please write a number between 0 to 360."); 
    } 
} 

satButton.onclick = saturation; 

Answer 1

一種方法是更換bg格，如果它存在

var satInput = document.createElement("input"); 
 
var satButton = document.createElement("button"); 
 

 
satInput.setAttribute("placeholder", "Write a number between 0 to 360"); 
 
satInput.setAttribute("size", "30") 
 
satButton.innerHTML = "Submit"; 
 

 
document.body.appendChild(satInput); 
 
document.body.appendChild(satButton); 
 

 
var saturation = function() { 
 

 
    if (satInput.value !== "" && satInput.value >= 0 && satInput.value <= 360) { 
 

 
    var existing = document.getElementById("bg"); 
 
    var background = document.createElement("div"); 
 
    background.id = "bg"; 
 
    if (existing) { 
 
     document.body.replaceChild(background, existing); 
 
    } else { 
 
     document.body.appendChild(background); 
 
    } 
 

 

 
    for (var i = 0; i <= 100; i++) { 
 
     var childDiv = document.createElement("div"); 
 
     childDiv.id = "color"; 
 
     background.appendChild(childDiv); 
 
     childDiv.style.backgroundColor = "hsl(" + satInput.value + "," + i + "%, 50%)"; 
 
    } 
 

 
    } else { 
 
    alert("Please write a number between 0 to 360."); 
 
    } 
 
} 
 

 
satButton.onclick = saturation;

#bg { 
 
    background-color: #eee; 
 
    border: 1px solid #000; 
 
    text-align: center; 
 
    padding: 10px 0; 
 
    margin-top: 10px; 
 
} 
 
#color { 
 
    display: inline-block; 
 
    height: 20px; 
 
    width: 15%; 
 
    border: 1px solid #000; 
 
    margin: 2px; 
 
    text-align: center; 
 
    font-family: segoe, sans-serif; 
 
    font-size: 14px; 
 
    line-height: 18px; 
 
}

---

另一個就是刪除bg的內容然後添加新內容

var satInput = document.createElement("input"); 
 
var satButton = document.createElement("button"); 
 

 
satInput.setAttribute("placeholder", "Write a number between 0 to 360"); 
 
satInput.setAttribute("size", "30") 
 
satButton.innerHTML = "Submit"; 
 

 
document.body.appendChild(satInput); 
 
document.body.appendChild(satButton); 
 

 
var saturation = function() { 
 

 
    if (satInput.value !== "" && satInput.value >= 0 && satInput.value <= 360) { 
 

 
    var background = document.getElementById("bg"); 
 
    if (background) { 
 
     background.innerHTML = ''; 
 
    } else { 
 
     background = document.createElement("div"); 
 
     document.body.appendChild(background); 
 
     background.id = "bg"; 
 
    } 
 

 

 
    for (var i = 0; i <= 100; i++) { 
 
     var childDiv = document.createElement("div"); 
 
     childDiv.id = "color"; 
 
     background.appendChild(childDiv); 
 
     childDiv.style.backgroundColor = "hsl(" + satInput.value + "," + i + "%, 50%)"; 
 
    } 
 

 
    } else { 
 
    alert("Please write a number between 0 to 360."); 
 
    } 
 
} 
 

 
satButton.onclick = saturation;

#bg { 
 
    background-color: #eee; 
 
    border: 1px solid #000; 
 
    text-align: center; 
 
    padding: 10px 0; 
 
    margin-top: 10px; 
 
} 
 
#color { 
 
    display: inline-block; 
 
    height: 20px; 
 
    width: 15%; 
 
    border: 1px solid #000; 
 
    margin: 2px; 
 
    text-align: center; 
 
    font-family: segoe, sans-serif; 
 
    font-size: 14px; 
 
    line-height: 18px; 
 
}