Semplice chat

di
luiginho97
il
2 risposte
L
luiginho97
Pochi posts
Iscritto da
mar, 2013
Messaggi:
23

Semplice chat

Buongiorno ragazzi, il problema è semplice: sto realizzando una semplice chat con javascript, ma non riesco a trovare un modo per aggiungere il testo sotto quelli già digitati in precedenza, difatti se clicco per aggiungere del testo in una delle due div, e dopo clicco in un altra con l'altro testo, il testo scritto in precedenza scompare e compare la nuova div. Non so se mi spiego, io vorrei sapere quale metodo js mi permette di aggiungere del testo piuttosto che sovrascrivere.
il link è 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<title>Chat</title>
</head>
<script type="text/javascript">
function user1(id) {
var msg_user1 = document.getElementById(id).value;
document.getElementById('chat').innerHTML="<div style=\"width:100%;height:20px;margin-top:2px;position:relative;background-color:yellow\">"+msg_user1+"</div>";
}
function user2(id) {
var msg_user2 = document.getElementById(id).value;
document.getElementById('chat').innerHTML="</br><div style=\"width:100%;height:20px;margin-top:3px;position:relative;background-color:green;\">"+msg_user2+"</div>";
}
</script>
<body>
<div id="user1" style="margin:2px; float:right;width:250px;border:solid red 2px;">
	<input type="text" id="text1" value="Digita qui">
	<input type="submit" value="Invia" onclick="user1('text1');">
</div>
<div id="user2" style="margin:2px; float:right;width:250px;border:solid red 2px;">
	<input type="text" id="text2" value="Digita qui">
	<input type="submit" value="Invia" onclick="user2('text2');">
</div>
<div id="chat" style="height:400px;width:400px;border:solid 1px blue;float:left;">
</div>
</body>
</html>

2 Risposte

  • D
    Della
    Molto attivo
    Iscritto da
    nov, 2010
    Messaggi:
    1305

    Re: Semplice chat

    Ciao! Invece di cambiare l'innerHTML (cosa che ti sostituisce TUTTO il contenuto precedente con quello "nuovo") dovresti appendere il nuovo "div" a quelli eventualmente già presenti dentro "chat".
    Qualcosa del genere: 
    
function user1(id) {
                var msg_user1 = document.getElementById(id).value;
                var chat = document.getElementById('chat');
                var newHtml ="<div style=\"width:100%;height:20px;margin-top:2px;position:relative;background-color:yellow\">"+msg_user1+"</div>";
                var prevHtml = chat.innerHTML;
                chat.innerHTML = prevHtml+newHtml;
}
    In realtà questa è una versione un po' grezza, sarebbe meglio creare il nuovo div ed aggiungerlo alla chat utilizzando il metodo "appendChild".
    Oppure potresti usare jQuery, in particolare il metodo append
  • L
    luiginho97
    Pochi posts
    Iscritto da
    mar, 2013
    Messaggi:
    23

    Re: Semplice chat

    Grazie mille
Devi accedere o registrarti per scrivere nel forum
2 risposte