Come creare una semplice casella di commento su una pagina Web utilizzando HTML, CSS e JavaScript
Esploreremo come fare una semplice casella di commento con HTML, CSS e JavaScript in questo post.
Html
Apri il tuo editor preferito e digita o incolla il codice di seguito. Salva il file con estensione HTML.
Nel codice HTML sopra, abbiamo usato il collegamento Tag nel tag di testa per fare riferimento al file CSS che useremo in seguito. Dopo questo, nel corpo Tag prima, abbiamo avviato una casella di input in cui un utente può digitare il proprio commento. Quindi un pulsante con il nome del inviare è avviato che verrà fatto clic per inserire un commento. Dopo questo, abbiamo avviato un elenco non ordinato (UL) e l'abbiamo lasciato vuoto perché aggiungeremo un elemento LI da JavaScript in questo tag. Puoi anche vedere che usiamo il id attributo nel codice sopra che verrà utilizzato per fare riferimento agli elementi corrispondenti nel codice JavaScript. L'ultimo tag è il sceneggiatura Tag in cui abbiamo superato il riferimento del file JavaScript che sarà allegato al file HTML corrente. Il nome del file JavaScript è codice.js.
CSS
Crea un file con il nome di stile.CSS. Va notato che puoi nominare qualsiasi altra file ma ricordati di fare riferimento a quel nome nel tag di collegamento del file HTML. Copia e incolla il codice seguente nel tuo file CSS:
corpoSfondo: DodgerBlue Linear-Gradient (45Deg, Aqua, DodgerBlue, DeepPink) fisso;
#comment-box, #post
confine: nessuno;
raggio di confine: 5px;
#post: hover
Background-color: DeepPink;
Nel codice CSS sopra, in primo luogo, abbiamo fatto riferimento al corpo tag di html e decorato lo sfondo del corpo con colori diversi. Quindi usando il id Attributo della casella di input, abbiamo svanito il bordo della casella di input e gli abbiamo dato un raggio di 5px. Lo stesso stile è stato applicato al inviare pulsante. Dopo questo, usando il molare Proprietà impostamo un colore di sfondo di rosa profonda per il pulsante POST, il che significa ogni volta che un utente si libra sul inviare pulsante il suo colore cambierà in rosa intenso.
JavaScript
Crea un file JavaScript con js Estensione per esempio codice.js. Va notato che il nome del file dovrebbe essere simile a quello a cui è stato fatto riferimento nel tag script del file HTML.
Nel codice.js File, in primo luogo, otteniamo l'elemento del pulsante HTML utilizzando getElementById () metodo e passare il nome dell'ID dato al pulsante in HTML. Puoi anche vedere un ascoltatore di eventi allegato al inviare che è fondamentalmente l'elemento pulsante. Questo ascoltatore di eventi ascolterà continuamente e ogni volta che un utente fa clic su inviare pulsante La funzione all'interno del file Ascoltatore di eventi sarà eseguito.
var post = documento.getElementById ("post");inviare.addEventListener ("click", function ()
var commentBoxValue = documento.getElementById ("commento-box").valore;
var li = documento.createElement ("li");
var text = documento.CreateTextNode (commentBoxValue);
li.appendChild (testo);
documento.getElementById ("non ordinato").AppendChild (Li);
);
Nella funzione dell'ascoltatore di eventi, in primo luogo, stiamo ottenendo il valore della casella di input e successivamente, abbiamo creato un elemento LI. Per impostare il testo dell'elemento Li che abbiamo usato createtextnode e dopo quello usando il AppendChild Metodo Abbiamo fornito il testo all'elemento Li. Finalmente, usando il AppendChild Metodo stiamo fornendo l'elenco non ordinato dell'elemento Li che abbiamo appena creato.
Conclusione
HTML, CSS e JavaScript sono i mattoni per uno sviluppatore Web e molti siti Web sono sviluppati utilizzando queste tre tecnologie.
In questo post, ti abbiamo fornito il codice e la spiegazione del codice su come creare una casella di commento utilizzando HTML, CSS e JavaScript. Questo progetto sarà utile quando si effettuano elenchi di cose da fare, commenti su una pagina Web o moduli di feedback e allega il testo a una pagina in qualsiasi progetto Web.