Czat JavaScript

pytanie zadane 17 lutego 2019 w JavaScript przez Rafał Masny Obywatel (1,700 p.)

Witam.

Zrobiłem prosty czat z użyciem JS i nie działa tak jak chcę. Otóż, po kliknięciu ''wyślij'' ma się wyświetlić to, co zostało napisane oraz godzina. Co zrobiłem źle, a może czegoś nie zrobiłem?

<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
<title> czat </title> 
<script src="plik.js"></script>
<style>
body {text-align: center; background: #A56FF6;
</style>
</head>
<body>
<h2> czat </h2>

<input type="text" id="Tekst"/>
<button type="submit" onclick="dodawanie()">Wyślij</button>
<div id="srodek"></div>
</body>
</html>

var x=0;
var y= "" ;

function dodawanie()
{
	var dzisiaj=new Date();
	var dzien = dzisiaj.getDate();
	var miesiac = dzisiaj.getMonth()+1;
	var rok = dzisiaj.getFullYear();
	var godzina = dzisiaj.getHours();
	var minuta = dzisiaj.getMinutes();
	var sekunda = dzisiaj.getSeconds();
	var data = dzien+"/"+miesiac+"/"+rok+"|"godzina+":"+minuta+":"+sekunda;
	var text=document.getElementById("Tekst").value;

	x++


	
	document.getElementById("srodek").innerHTML= y + data + " <div
	id=\"Tekst\">"+ text + "</div>";
	
	y = y + data + ": <div id=\"Tekst\">" + text + "</div>";
}

2 odpowiedzi

odpowiedź 17 lutego 2019 przez jarek9244 Gaduła (3,430 p.)
wybrane 17 lutego 2019 przez Rafał Masny

Najlepsza

Cześć

Najlepiej uruchom sobie konsolę w przeglądarce (F12) i sprawdź czy Ci jakieś błędy nie wyskoczyły. Aczkolwiek problem na pewno będzie w tym co mój przedmówca napisał, dodaj "+" podczas konkatenacji stringów oraz usuń znak nowej linii w linijce 20

var data = dzien+"/"+miesiac+"/"+rok+"|"+godzina+":"+minuta+":"+sekunda;

document.getElementById("srodek").innerHTML= y + data + " <div id=\"Tekst\">"+ text + "</div>";

komentarz 17 lutego 2019 przez Rafał Masny Obywatel (1,700 p.)

Dzięki, działa.

Znasz jakąś stronę, na której mogę dowiedzieć się jak zrobić, żeby czat był w ramce? Ustawić jej kolor etc. Mniej więcej jak to

komentarz 17 lutego 2019 przez jarek9244 Gaduła (3,430 p.)

Wystarczy, że weźmiesz elementy h2, input, button i div i wstawisz te elementy do nowego diva i za pomocą css ustawisz jakieś konkretne style

<div class="czat">
    <h2> czat </h2>
    <input type="text" id="Tekst"/>
    <button type="submit" onclick="dodawanie()">Wyślij</button>
    <div id="srodek"></div>
</div>

A ramkę możesz zrobić np. za pomocą właściwości CSS "border", która ustawia obramowanie dla konkretnego elementu

.czat {
    border: 1px solid #fff;
}

A co do stronek, to na pewno na https://stackoverflow.com, znajdziesz wszystko czego potrzebujesz :p

komentarz 17 lutego 2019 przez Rafał Masny Obywatel (1,700 p.)

Ok. Już zrobiłem. Dziękuję :)

komentarz 17 lutego 2019 przez Rafał Masny Obywatel (1,700 p.)

@jarek9244,

da się w łatwy sposób zrobić tak, żeby godzina była w innym kolorze i tekst?

komentarz 17 lutego 2019 przez jarek9244 Gaduła (3,430 p.)

No pewnie, że się da :D

Najlepiej będzie wziąć godzinę w nowy selektor np. <span> i za pomocą styli poustawiać to co Ci się podoba.

var data = dzien+"/"+miesiac+"/"+rok+"|<span>"godzina+":"+minuta+":"+sekunda + "</span>";

A później za pomocą CSS

span {
    color: red;
}

I to samo możesz zrobić z tekstem, też wziąć w jakiś selektor i go ostylować.

komentarz 17 lutego 2019 przez Rafał Masny Obywatel (1,700 p.)

Napotkałem problem. Chcę, żeby też data była w tym kolorze co godzina.

Przed miesiącem jak wstawię <span> to jest ok, tylko dzień jest inny

var data = dzien+"/<span>"+miesiac+"/ "+rok+"| "+godzina+":"+minuta+":"+sekunda+" </span>";

ale gdy wstawię przed dzien to już skrypt nie działa

var data = <span>dzien+"/"+miesiac+"/ "+rok+"| "+godzina+":"+minuta+":"+sekunda+" </span>";

1	komentarz 17 lutego 2019 przez jarek9244 Gaduła (3,430 p.) Wstaw <span> z początku w cudzysłowie, bo to ma być traktowane jako tekst w którym jest zapisany znacznik HTML var data = "<span>"+dzien+"/"+miesiac+"/ "+rok+"\| "+godzina+":"+minuta+":"+sekunda+" </span>";

odpowiedź 17 lutego 2019 przez xmentor Nałogowiec (49,520 p.)

+rok+"|"godzina+":"

Brakuje +

document.getElementById("srodek").innerHTML= y + data + " <div
    id=\"Tekst\">"+ text + "</div>";

String powinien być w jednej lini. Jeżeli chcesz zrobić tak jak teraz to użyj template strings

komentarz 17 lutego 2019 przez Rafał Masny Obywatel (1,700 p.)

Nadal nie działa...

Podobne pytania

0 głosów

2 odpowiedzi 215 wizyt

Czat na stronę www... JAK

pytanie zadane 7 kwietnia 2020 w JavaScript przez Samek2222 Początkujący (440 p.)

0 głosów

1 odpowiedź 275 wizyt

czat i cms php

pytanie zadane 28 sierpnia 2015 w PHP przez Weenter Użytkownik (830 p.)

0 głosów

2 odpowiedzi 641 wizyt

czat - html i php

pytanie zadane 17 maja 2020 w PHP przez Damian12345 Bywalec (2,940 p.)

Czat JavaScript

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci