Почему один фрагмент кода перекрывает другой?

Question

Проблема с моим кодом в том, что если зеленый элемент выполняется первым, оранжевый элемент не может быть выполнен. Оранжевый работает хорошо, прежде чем зеленый выполняет. Я хочу, чтобы оранжевая часть работала и после зеленого, даже если зеленый был нажат до этого.

function showToast() {
    const empty = document.getElementById("latitude" && "longitude" && "radius").value == "";
    var element = document.getElementById("applybutton");
    const message = empty ?
    "Geofence perimeter cannot be set due to missing configuration \n \n Kindly update all fields
     accordingly":
    "Geofence perimeter has been correctly set. \n \n Hence you may now proceed with Geofence Activation"
    + element.classList.add("green"); // THIS PART OVERRIDES THE ONE BELOW


    window.plugins.toast.showWithOptions({
        message: message,
        duration: "short",
        position: "top"
    });
}

function bin() {
    document.getElementById("latitude").value = "";
    document.getElementById("longitude").value = "";
    document.getElementById("radius").value = "";

    var element = document.getElementById("applybutton");
    element.classList.add("orange"); // THIS ONE DOESN'T WORK IF THE ONE UP WAS EXECUTED BEFORE
}

Answer 1

Root причина проблемы во втором classList.add . Это только добавление «оранжевого» стиля к кнопке, для которой уже установлен «зеленый» стиль.

Проблема может быть исправлена ​​с помощью , явно удаляющего все стили перед добавлением нового.

element.classList.remove("green", "orange")  // Remove all styles

element.classList.add("orange")   // Add orange style.

Дополнительная информация: https://www.w3schools.com/jsref/prop_element_classlist.asp