Come sostituire DIV su clic del mouse

December 11

JavaScript consente di sostituire in modo dinamico il contenuto in un tag div HTML nelle pagine Web. Questa tecnica di programmazione viene utilizzato per visualizzare in modo dinamico avvisi o istruzioni per gli utenti dopo aver fatto clic su un pulsante o un'immagine. Si crea una funzione JavaScript per modificare il contenuto div, quindi collegare la funzione al pulsante o l'immagine che si desidera utilizzare per attivare le modifiche al testo.

istruzione

1 Fare clic destro sul file HTML che si desidera modificare e selezionare "Apri con" nel menu a comparsa. Clicca l'editor HTML nel sottomenu.

2 Creare la funzione JavaScript. Il seguente codice JavaScript cambia il contenuto di un div a "Nuovo testo".

<Script type = "text / javascript">

Funzione divtext (div) {

div.innerText = "Nuovo testo".;

}

</ Script>

È possibile aggiungere qualsiasi testo alla funzione innerText del div. Se si preferisce aggiungere codice HTML per il contenuto div, è necessario modificare "innerText" a "innerHTML."

3 Collegare la nuova funzione JavaScript per un pulsante o un'immagine. È possibile aggiungere la funzione di ogni elemento form HTML che si desidera utilizzare per modificare il contenuto div. È possibile utilizzare l'evento "OnClick" per la funzione. Il codice che segue è un esempio di un pulsante che cambia il contenuto del div:

<Input type = "button" onclick = "divtext (document.getElementById (" divId "))" value = "Fare clic qui per modificare il contenuto">

Sostituire "divId" con l'ID del div che si desidera modificare in modo dinamico.

4 Fare clic sul pulsante "Salva" e aprire il file HTML in un editor. Fare clic sul pulsante per verificare le modifiche. Notare quando si fa clic sul pulsante, il testo aggiorna dinamicamente nel browser senza aggiornare la pagina.