• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Co robię źle? - JS, HTML, CSS

VPS Starter Arubacloud
0 głosów
271 wizyt
pytanie zadane 17 lipca 2017 w Nasze projekty przez Hiskiel Pasjonat (22,830 p.)

Cześć! Z tej strony znowu ja, jestem z kolejnym pytaniem... Tym razem chodzi oto, że zrobiłem w JS'ie HTML'u i CSS'ie prosty projekt który ma za zadanie dodawać do tabelki tekst który wpisze się w inpucie... Wszystko jest ok, ale... Jest problem z wystylizowaniem tabelki... Na tr i td nie działają marginesy itd... Prosiłbym o pomoc...

Tutaj kod:

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Trzeci test</title> 
		<link rel="stylesheet" href="style.css" type="text/css"/>
	</head>
	<body> 
		<div id="wrapper">
			<div id="wrapperbi">
				<button id="addBtn">Dodaj nowy element</button>
				<input type="text" id="Input"></input>
			</div>
			<div id="wrapperall">
			</div>
		</div>
		<script src="main.js"> </script>
	</body>
</html>

 

 

 

 

CSS:

body
{
	background-color: gray;
}
#wrapper
{
	margin-left: 350px;	
	margin-top: 35px;
	border: 2px solid black;
	width: 326px;
	max-width: 326px;
}
#wrapperall
{
	margin: 3px;
	margin-bottom: 0;
	box-sizing: border-box;
}
#wrapperbi
{
	margin: 3px;
	background-color: #0fafff;
	box-sizing: border-box;
	max-width: 326px;
}
#label
{
	margin: 20px;
	background-color: gray;
	margin-left: 3px;
	max-width: 326px;
	width: 320px;
}
button
{
	margin: 5px;
	border-radius: 5px 5px 5px 5px;
	border: 3px solid lightgreen;
	background-color: lightgreen;
	
}
Input
{
	border-radius: 5px 5px 5px 5px;
	margin: 5px;
	border: 0;
}
td
{
	background-color: #0090d8;
	max-width: 326px;
	width: 320px;
	margin-bottom: 3px;
}
tr
{
	text-align: center;
	width: 320px;
	color: #d8d6d6;
	font-family: Verdana, sans-serif;
	background-color: #0090d8;
	box-sizing: border-box;
	border-bottom: 3px solid white;
}

 

 

 

JS:

var labelTd = document.createElement("td");
var wrapper = document.getElementById("wrapperall");
wrapper.appendChild(labelTd);
var labelElement = document.createElement("tr");
labelTd.appendChild(labelElement);


var addBtn = document.getElementById("addBtn")
var NameInput = document.getElementById("Input");

addBtn.addEventListener("click", function () 
{
	var Name = document.querySelector("Input");
	var NewLabelElement = document.createElement("tr");
	labelTd.appendChild(NewLabelElement);
	NewLabelElement.innerHTML = Name.value;
	Name.value = " "
}, false);

 

 

Podaje wszystkie kody źródłowe, ponieważ nie wiem w którym mam błąd... Prosiłbym o szybką pomoc!!!

 

 

1
komentarz 17 lipca 2017 przez X3h Dyskutant (9,540 p.)
Powinny być punkty ujemne jak na staku.

Trzy kropki na końcu zdania, wykrzykniki.

Źle skonstruowane zapytanie.

Masa zbędnego kodu.

2 odpowiedzi

+2 głosów
odpowiedź 17 lipca 2017 przez imklau Nałogowiec (42,090 p.)

spójrz sobie najpierw, jak powinna wyglądać tabela: mdn

W HTML brakuje Ci znacznika <table> - dopiero do niego wstawiaj najpierw tr, a później td.
Jeśli chodzi o marginesy w tabeli to użyj tego border-spacing.

PS. nie łatwiej wrzucić to w listę, skoro dane nie muszą być przedstawione w tabeli?

komentarz 17 lipca 2017 przez Hiskiel Pasjonat (22,830 p.)
Tak, dużo łatwiej byłoby,wrzucić to w listę, ale przy liście są te kropki z tabeli znaków ASKI - • Których nie chce :V
1
komentarz 17 lipca 2017 przez imklau Nałogowiec (42,090 p.)

to widać trochę jeszcze CSS musisz poznać ;)
dodajesz do listy list-style: none i kropek nie ma ;)

0 głosów
odpowiedź 19 lipca 2017 przez Radekol Bywalec (2,880 p.)
W linijce 8 brakuje ci ; na końcu linii :)

Podobne pytania

0 głosów
1 odpowiedź 342 wizyt
pytanie zadane 23 sierpnia 2017 w C i C++ przez niezalogowany
0 głosów
3 odpowiedzi 266 wizyt
pytanie zadane 19 października 2016 w Nasze projekty przez kieryk123 Początkujący (300 p.)
0 głosów
0 odpowiedzi 92 wizyt
pytanie zadane 15 grudnia 2018 w JavaScript przez kacper1445 Gaduła (4,880 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...