DOMANDA button più dettagli javascript

pcfree1

Utente Attivo
904
41
CPU
Pentium dual core G3450
Ciao a tutti,

ho questo codice javascript che crea un pulsante che al click apre un div contenente testo aggiuntivo. però non riesco a settare inizialmente il testo mydiv nascosto. Come è adesso il box #myDIV appare aperto al caricamento della pagina, come faccio a metterlo nascosto quando si apre la pagina?

Codice:
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top:20px;
}
</style>
</head>
<body>

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

<script>
function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

</body>
</html>
 
M

Mursey

Ospite
HTML:
<div id="myDIV" style="display:none">
   This is my DIV element.
</div>

Per visualizzarlo
JavaScript:
document.getElementByID("myDIV").style.display = "block";
 
  • Mi piace
Reazioni: pcfree1

pcfree1

Utente Attivo
904
41
CPU
Pentium dual core G3450
HTML:
<div id="myDIV" style="display:none">
   This is my DIV element.
</div>

Per visualizzarlo
JavaScript:
document.getElementByID("myDIV").style.display = "block";
ora è nascosto però ho un altro problema: ho nella stessa pagina più div disposti orizzontalmente, come de riquadri, che contengono del testo. Ho provato a fare copia incolla di quel codice per ognuno di questi riquadri, ma se clicco ad esempio sul secondo pulsante o il terzo all'interno del contenitore che dovrebbe mostrarmi il testo in più mi mostra sempre il testo del primo contenitore. Come faccio a dirgli che deve mostrarmi il testo in più relativo al contenitore in cui è il pulsante? Ho provato a cambiare l'id, dandogli myDIV1, myDIV2 etc.. ma non funziona.
 
M

Mursey

Ospite
Se usi il nome corretto in
JavaScript:
document.getElementByID("myDIV").style.display = "block";
dovrebbe funzionare
 

pcfree1

Utente Attivo
904
41
CPU
Pentium dual core G3450
Se usi il nome corretto in
JavaScript:
document.getElementByID("myDIV").style.display = "block";
dovrebbe funzionare
purtroppo non funziona, non capisco a che id fa riferimento,

nell'html c'è questa riga

Codice:
 <div id="myDIV" style="display: none;">
però questa dovrebbe chiamare lo stile css contenuto nell'<head>
Codice:
#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top:20px;
}

la funzione a cosa si aggancia con document.getElementByID ?

Ho provato a cambiare nel secondo contenitore al posto di myDIV
Codice:
document.getElementByID("myDIV1").style.display = "block";
e nell'html a mettere
Codice:
<div id="myDIV1" style="display: none;">
per il secondo contenitore, così il secondo contenitore funziona , ma se clicco mostra testo nel primo contenitore mi mostra il testo del secondo contenitore
 
M

Mursey

Ospite
Bene !

Pero' qualche precisazione:

nell'html c'è questa riga
Codice:
 <div id="myDIV" style="display: none;">
però questa dovrebbe chiamare lo stile css contenuto nell'<head>
Codice:
#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top:20px;
}
Il codice in html non chiama un foglio di stile ma e' il css che viene applicato all'elemento creato in html.
In questo caso gli attributi descritti nel html vengono applicati all'elemento di nome myDIV.

la funzione a cosa si aggancia con document.getElementByID ?
Non si aggancia a nessuna funzione.
getElementByID serve per avere un riferimento all'oggetto che si trova nel documento html
Se ad esempio fai
JavaScript:
var casellaTesto = document.getElementByID('nome');
Vuol dire che la variabile casellaTesto contiene l'elemento che, nel documento html, ha l'id nome.
A quel punto usando la variabile puoi leggere o scrivere nella textBox.
 
  • Mi piace
Reazioni: pcfree1

Entra

oppure Accedi utilizzando
Discord Ufficiale Entra ora!

Discussioni Simili