0

我正在开发一个非常简单的应用程序来跟踪使用的数字或条形码。

计算出条形码的数量后，我使用 Javascript 函数将其显示到 UI insertAdjacentHTML，创建一个具有所需 HTML 的 div，尽管我似乎无法找到一种方法来每次替换 DIV 而不是创建另一个例子，一个又一个。

我认为这可能是范围问题，但我找不到解决方案。

const myForm = document.getElementById("form_barCodeAdmin");

myForm.addEventListener("submit", (e) => {
    let startRange, endRange, quantity;

    e.preventDefault(); // Prevents web page from reloading.

    startRange = document.getElementById("start__range").value;
    endRange = document.getElementById("end__range").value;



    if(endRange > startRange){

        quantity = endRange - startRange;

        let html = `<div class="alert alert-warning" id="quantity__range">Quantity Barcodes: %quantity% </div>`;

        replacedHTML = html.replace('%quantity%', quantity);
        document.getElementById("range__Results").insertAdjacentHTML('beforeend', replacedHTML);


        // if html is not empty then delete Node and run Insert html function. Else run Function. 

    } else {
        console.log("Please enter a smaller starting range than the end range");
    };

});
4

1 回答 1

1

如果你想替换所有#range__Results刚刚使用的内容.innerHTML = replacedHTML而不是插入它。

如果有更多内容并且您只想替换#qunantity_range您添加的内容，然后您可以检查它是否存在并在插入新内容之前将其删除

let currentQuantityRange = document.getElementById('quantity_range')
if (currentQuantityRange) currentQuantityRange.remove()

或者，您可以检查 div 是否存在并替换它的内容而不是添加它

let currentQuantityRange = document.getElementById('quantity_range')
if (currentQuantityRange)
  currentQuantityRange.innerHtml = `Quantity Barcodes: ${quantity}`
else {
  let html ....
于 2020-06-13T16:35:06.467 回答