Тема: Допоможіть, будь ласка, рішити завдання
Створити анкету користувача. Поставити такі питання: ім'я, прізвище,
батькові, вік, телефон, електронна пошта.
Вивести отримані дані про користувача безпосередньо в веб-сторінку.
Використовуючи JavaScript змінити стиль елементів:
1) для елементів ПІБ(Призвіще, Ім'я, Побатькові) і Телефон задати:
a) колір фону LightBlue
b) шрифт sans-serif
c) відступ для верхнього і нижнього краю - 5 px
2) для елементів Вік і Email задати:
a) колір фону Aquamarine
b) шрифт sans-serif
Приклад - див. додатковий файл(нажаль на російській мові, сподіваюся, що нікого цим не ображу)
Допоможіть, будь ласка, зробити завдання.
Мої думки на цю тему:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table border="1" width="20%" cellpadding="5">
<h1>User's Questionary</h1>
<tr>
<td><label id="nsplabel">Name, Patronymic, Surname</label><br><input id="nspinput"></td>
</tr>
<tr>
<td><label id="agelabel">Age</label><br><input id='ageinput'></td>
</tr>
<tr>
<td><label id="telephon-number-label">Telephone Number</label><br><input id='telephon-number-input'></td>
</tr>
<tr>
<td><label id="email-label">E-Mail</label><br><input id='emailinput'></td>
</tr>
</table>
<button id='btn_one' class=okbtn>OK</button>
<script src="script.js"></script>
</body>
</html>JS
var data;
document.getElementById('btn_one').onclick = Data;
function Data(){
data ={
name: document.getElementById("nspinput").value,
age: document.getElementById("ageinput").value,
telephone_number: document.getElementById('telephon-number-input').value,
email: document.getElementById('emailinput').value
}
document.writeln(data.name)
document.writeln(data.age)
document.writeln(data.telephone_number)
document.writeln(data.email)
}
function ChangeColorOk(){
document.getElementById('nspinput').className = "lightblue";
document.getElementById('ageinput').className = "aquamarine";
document.getElementById('telephon-number-input').className = "lightblue";
document.getElementById('emailinput').className = "aquamarine";
document.getElementById('nsplabel').className = 'fontfamily';
document.getElementById('agelabel').className = 'fontfamily';
document.getElementById('telephon-number-label').className = 'fontfamily';
document.getElementById('email-label').className = 'fontfamily';
} CSS
.aquamarine{
background-color: aquamarine;
}
.lightblue{
background-color: lightblue;
}
.fontfamily{
font-family: sans-serif
}
.okbtn{
margin: 7px 0px 0px 0px;
}
