Problemi con lo style.display

Ciao a tutti!

Vi spiego la mia idea: il sito che sto progettando vorrei che fosse a pagina unica (solo home) anziché a più pagine, ma una sola pagina che cambia il contenuto! Così ho creato tre diversi div che si sostituiscono l'uno con l'altro a seconda di quale pulsante viene cliccato sulla navigation bar in alto.
Il codice sarebbe questo:

<script>
	function soloprenota() {
		var visualizzazione = 1;
		document.getElementById("article1").style.display = "block";
		document.getElementById("article2").style.display = "none";
		document.getElementById("article3").style.display = "none";
	}
				
	function soloilnostrosuono() {
		var visualizzazione = 1;
		document.getElementById("article1").style.display = "none";
		document.getElementById("article2").style.display = "block";
		document.getElementById("article3").style.display = "none";
	}
				
	function soloreasonwhy() {
		var visualizzazione = 1;
		document.getElementById("article1").style.display = "none";
		document.getElementById("article2").style.display = "none";
		document.getElementById("article3").style.display = "block";
	}
</script>

E fin qui ci siamo. Vi chiederete il perché di quella variabile uguale a 1. Ve lo spiego subito: nel primo momento in cui la pagina viene caricata, non essendo ancora stato cliccato alcun pulsante, vengono mostrati tutti e tre i div. Questo non va bene! O, quantomeno, non mi piace.. Sarebbe perfetto se venisse visualizzato solo il div "article1" come nel primo caso del codice soprastante, come se il primo pulsante fosse quello di default, per intenderci.
Dunque ho provato a mettere questo ad inizio pagina ed altre varianti per vedere se fosse la semantica ad essere sbagliata:

<script>
	var visualizzazione = 0;
</script>

<script>
	if (visualizzazione = 0) {
		document.getElementById("article1").style.display = "block";
		document.getElementById("article2").style.display = "none";
		document.getElementById("article3").style.display = "none";
	}
</script>

ma non funziona...

Secondo voi come dovrei cambiarlo il codice per far funzionare la mia idea?

[karl94]

Ci sono svariati problemi.
Anzitutto all'interno della condizione dell'if hai usato un espressione che è di assegnazione, ossia l'operatore = (uguale) è di assegnazione e non di comparazione; l'espressione quindi non sarà mai vera e il codice all'interno del costrutto condizionale non verrà mai eseguito.
Nel codice della tua pagina vedo elementi align, non esiste nulla di simile in HTML (al più come attributi, ma sono comunque deprecati).
Non è un vero e proprio problema, ma quelle variabili visualizzazione che dichiari nelle varie funzioni sono inutili.
Se levi direttamente l'if e lasci solamente il corpo "risolvi", ma faresti meglio a non usare JavaScript. Potresti ottenere il medesimo risultato con solo un po' di CSS. Anche tutti quegli attributi align sarebbe meglio se sparissero e fossero sistemati mediante il foglio di stile.

Ho provato a cambiare quel "=" dentro l'if con "==" (e anche con "===") ma il risultato non cambia...
Ho provato pure a togliere l'if ma niente.

Seriamente, non capisco quale sia il problema... In almeno una di queste maniere non dovrebbe vedersi solo il primo div appena aperta la pagina?

[karl94]

Io sul tuo sito vedo ancora il vecchio codice, puoi aggiornarlo? Ricorda anche che se lo lasci in alto nella pagina non funzionerà in quanto al momento dell'esecuzione gli elementi a cui si riferisce non sono ancora stati analizzati ed aggiunti all'albero del documento.

È proprio questo il mio quesito: come posso richiamare una funzione senza il bisogno di un'azione da parte dell'utente?
Comunque ho aggiornato il sito (visualizzavi la vecchia versione perché ho tutto su un altro dominio il cui server, però, non mostra la riga sbagliata in caso di errore php, ecco perché ogni tanto aggiorno qui).

[zyro]

Come ti hanno suggerito sopra la soluzione la puoi ottenere con un po' di CSS dando queste due semplici regole:

<style>
	#article1 { display: block; }
	#article2, #article3 { display: none; }
</style>

e sostituendo tutto quel codice con questo da posizionare subito dopo i 3 div in questione o anche nella head della pagina:

<script>
	$(document).ready(function(){
		// mostriamo il primo div
		$('#pulsante1').click(function() {
			$('#article1').show();
			$('#article2').hide();
			$('#article3').hide();
		});
		// mostriamo il secondo div
		$('#pulsante2').click(function() {
			$('#article1').hide();
			$('#article2').show();
			$('#article3').hide();
		});
		// mostriamo il terzo div
		$('#pulsante3').click(function() {
			$('#article1').hide();
			$('#article2').hide();
			$('#article3').show();
		});
	});
</script>

Dove ovviamente #pulsante1 (o 2 o 3) dovranno essere gli id univoci dei pulsanti che permetteranno di mostrare quel determinato div e nascondere gli altri.

L'ho scritto al volo quindi non l'ho testato, ma dovrebbe funzionare bene. Tra l'altro può essere migliorato ulteriormente per occupare meno spazio ed eventualmente implementare un numero infinito di div da poter gestire