Тема: Допоможіть, будь ласка, рішити завдання

Створити анкету користувача. Поставити такі питання: ім'я, прізвище,
батькові, вік, телефон, електронна пошта.
Вивести отримані дані про користувача безпосередньо в веб-сторінку.
Використовуючи 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;
}

2

Re: Допоможіть, будь ласка, рішити завдання

А що не працює?

Подякували: koala, FakiNyan, leofun013

3

Re: Допоможіть, будь ласка, рішити завдання

mike написав:

А що не працює?

Мені треба зробити функцію, яка із заповненої анкети створює таблицю(як на прикладі). Я не знаю як створити таку функцію.

4 Востаннє редагувалося Eff1c (22.01.2018 18:20:35)

Re: Допоможіть, будь ласка, рішити завдання

Мені здається це трохи не ввічливо просити щоб хтось зробив роботу потрібну тобі. Або розмісти цю тему у розділ робота і запропонуй за неї грошову винагороду, або вчи JS, HTML і роби сам.
Хіба, що тобі дадуть якусь підказку, або ти зробиш прогу і потрібно буде її підправити чи знайти помилку.

Подякували: mike, FakiNyan, ostap34PHP3

5

Re: Допоможіть, будь ласка, рішити завдання

Потрібно додати в  HTML елемент типу table і вже в самій ф-ії заповнювати її рядками
https://developer.mozilla.org/uk/docs/W … ateElement
https://www.w3schools.com/jsref/met_table_insertrow.asp

6

Re: Допоможіть, будь ласка, рішити завдання

можна викинути table і зробити блоками за допомогою сітки чи й без

Подякували: FakiNyan1

7

Re: Допоможіть, будь ласка, рішити завдання

таблиці краще не юзати, то для старих пердунів