Sprawdzanie czy div ma display:none.

Czołem Webmasterzy!

Na stronie mam dwa divy, "jeden" i "dwa". Sprawa jest prosta, ale nie potrafię sobie z nią poradzić. Chciałbym wyświetlać tylko jeden z nich, więc jeżeli widoczny jest div jeden, to div drugi powinien być niewidoczny. Jeżeli natomiast div jeden jest niewidoczny, to div drugi powinien być widoczny.

Przygotowałem JS, który niestety nie działa:

if (document.getElementById('jeden'),'display' == 'none') {
	  document.getElementById('dwa').style.display = 'block';
  }
if (document.getElementById('jeden'),'display' == 'block') {
	  document.getElementById('dwa').style.display = 'none';
  }

Dodam, że skrypt musi sprawdzać cały czas stan bloków, nie tylko jednorazowo podczas ładowania.

Czy mogę prosić o pomoc?

@badyllek1993 a można wiedzieć do czego chcesz to użyć? Spróbujemy wtedy podpowiedzieć jakieś optymalne rozwiązanie.

Desu napisał(a):

@badyllek1993 a można wiedzieć do czego chcesz to użyć? Spróbujemy wtedy podpowiedzieć jakieś optymalne rozwiązanie.

Do sklepu internetowego. Mam przycisk "dodaj do koszyka". Gdy się on nie wyświetla, bo np. nie ma produktów na stanie, to chcę zamiast niego pokazywać innego diva, np. "Zapytaj o dostępność".

https://jsfiddle.net/mu4ufmmw/

Ogólnie sparwdzanie tego tak jak Ty to robisz obejmuje tylko style nadane za pomocą atrybutu style. Możemy sobie zrobić taki helper:

function getStyleProperty(element, style) {
	return element.style[style] || getComputedStyle(element, null)[style];
}
getStyleProperty(document.getElementById("custom-header"), "display");
// "none"

I sprawdzać np. tak:

var divOne = document.getElementById("one"),
	divTwo = document.getElementById("two");

getStyleProperty(divOne, "display") == "none" 
	? divTwo.style.display = "block"
	: divTwo.style.display = "none"

Dodam, że skrypt musi sprawdzać cały czas stan bloków, nie tylko jednorazowo podczas ładowania.

Nie bardzo wiem, jak dokładnie się to u Ciebie odbywa, ale ja bym skorzystał z prostego event emmitera. Zamiast robić jakieś interwały i inne cuda w momencie kiedy pojawia się produkt wywoływane są określone akcja np. ukrywanie pokazywanie odpowiedniego diva.

Tutaj jest demo jak mogłoby to działać: przewiń na sam dół, żeby zobaczyć jak działa emitowanie itp.
https://jsfiddle.net/mu4ufmmw/2/

var EventEmitter = function() {
    var handlers = [];

    /**
     * Add an event handler for a specific event
     *
     * @param {String} event The event name
     * @param {Function} handler A event handler function
     */
    function addEventHandler(event, handler) {
        handlers[event] = handlers[event] || [];
        handlers[event].push(handler);
    }

    /**
     * Remove an event handler of a specific event name or remove all event handlers for a specific event.
     *
     * @param {String} event The event name where a specific or all handlers should be removed
     * @param {Function} [handler] An optional event handler function. If specified only this specific handler will be removed and otherwise all handlers are removed.
     */
    function removeEventHandler(event, handler) {
        // Only do something if there are event handlers with this name existing
        if (handlers[event]) {
            // If handler is set we will look for a specific handler and only remove this
            if (handler) {
                handlers[event].splice(handlers[event].indexOf(handler), 1);
                if (handlers[event].length === 0) {
                    delete handlers[event];
                }
            } else {
                // If no handler is specified we remove all handlers for this event
                delete handlers[event];
            }
        }
    }

    /**
     * Use this function to emit an event. All handlers that are listening for this event will be triggered with the data parameter.
     *
     * @param {String} event The event name that should be triggered
     * @param {*} data Arbitrary data that will be passed to the event handler callback functions
     */
    function emit(event, data) {
        // Only do something if there are event handlers with this name existing
        if (handlers[event]) {
            handlers[event].forEach(function(handler) {
                handler(data);
            });
        }

        // Emit event to star event handlers
        if (handlers['*']) {
            handlers['*'].forEach(function(starHandler) {
                starHandler(event, data);
            });
        }
    }

    return {
        addEventHandler: addEventHandler,
        removeEventHandler: removeEventHandler,
        emit: emit
    };
};

var events = new EventEmitter();
events.addEventHandler('produktXDostepny', function() {
	ukryjJakisDiv();
});

// jak produkt staje sie dostepny wywoływane są wszystkei dodane handlery w tym np. ukrywanie odpowiednich divow itd.
events.emit('produktXDostepny');  // wywoływane w miejscu gdzie jest sprawdzana dostępność produktu

filmik tłumaczący o co w tym chodzi :P