Создать анкету пользователя. Задать следующие вопросы: имя, фамилия,
отчество, возраст, телефон, электронная почта.
Вывести полученные данные о пользователе непосредственно в веб-страницу.
Используя JavaScript изменить стиль элементов:
- для элементов ФИО и Телефон задать:
a) цвет фона LightBlue
b) шрифт sans-serif
c) отступ для верхнего и нижнего края – 5 px - для элементов Возраст и 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;
}
При решении задачи столкнулся с проблемой, не могу создать функцию, которая, получив данные пользователя, выводила их в таблицу и применяла классы css в файле js