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!!!
