Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 18.02.2020, 12:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

опросник дерево из обьекта
Малик,
...
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  ul.ar{
      display: flex;
      list-style: none;
  }
  ul.ar:before{
      content: "[";
  }
  ul.ar:after{
      content: "]";
  }
  ul.ar li{
      color: rgba(0, 0, 255, 1);
      margin: 3px;
  }

  ul.ar li:after {
      content: ",";
  }
  ul.ar li:last-child:after {
      content: ""
  }
  ul.obj{
       font-weight: bold;
  }
  ul.str{
      color: rgba(34, 139, 34, 1);
      list-style:  none;
  }
  ul.str li:before{
      content: open-quote;
      quotes: "\00ab" "\00bb";
      color: rgba(255, 69, 0, 1);
  }
  ul.str li:after{
      content: close-quote;
      quotes: "\00ab" "\00bb";
      color: rgba(255, 69, 0, 1);
  }
  </style>
</head>
<body>
    <form>
        <div class=" container row col-md-4 mt-4" id="d1">
            <div>
                <label>Имя</label>
        <input type="text" id="FirstName" class="form-control" placeholder="First name">
    <label>Фамилия</label>
        <input type="text" id="LastName" class="form-control" placeholder="Last name">
    <label>Город</label>
        <input type="text" id="City" class="form-control" placeholder="City">
    <label>Телефон</label>
        <input type="tel" id="Phone" class="form-control" placeholder="Number" >
    <label>Вакансия</label>
        <select class="form-control" id="Vacancy">
            <option selected>Choose...</option>
                <option value="Backend">Backend</option>
                <option value="Web-Design">Web Design</option>
                <option value="Frontend">Frontend Developer</option>
        </select>
            </div>
            <input type="button" value="Далее"  class="btn btn-primary"
            onclick="document.getElementById ('d1').style.display = 'none';
                     document.getElementById ('d2').style.display = 'block'">
        </div>
    <div id="d2" style="display: none;">
        <div class="form-5 form-group">
            <label for="Question" class="question">Вопрос:</label>
            <input type="text" class="form-control" id="validationTextarea" placeholder="Какие языки программирования Вы используете?"> </div>
        <div class="custom-control custom-checkbox form-control form-6">
            <input type="checkbox" class="custom-control-input" id="CustomCheck1" value="c#">
            <label class="custom-control-label" for=>C#</label>
        </div>
        <div class="custom-control custom-checkbox form-control form-7">
            <input type="checkbox" class="custom-control-input" id="CustomCheck2" value="c++" >
            <label class="custom-control-label" for="CustomCheck2">C++</label>
        </div>
        <div class="custom-control custom-checkbox form-control form-8">
            <input type="checkbox" class="custom-control-input" id="CustomCheck3" value="asp.net" >
            <label class="custom-control-label" for="CustomCheck3">ASP.NET</label>
        </div>
        <div class="custom-control custom-checkbox form-control form-9" >
            <input type="checkbox" class="custom-control-input" id="CustomCheck4" value="php" >
            <label class="custom-control-label" for="CustomCheck3">PHP</label><br>
        </div>
        <input type="button" value="Далее"  class="btn btn-primary"
                    onclick="document.getElementById ('d2').style.display = 'none';
                             document.getElementById ('d3').style.display = 'block'">
    </div><br>
    <div id="d3" style="display: none;">
        <div class="form-5 form-group">
            <label for="Question" class="question">Вопрос:</label>
            <input type="text" class="form-control" id="validationTextarea" placeholder="С какими СУБД Вам приходилось работать?"> </div>
        <div class="custom-control custom-checkbox form-control form-6">
            <input type="checkbox" class="custom-control-input" id="CustomCheck5" value="mssql">
            <label class="custom-control-label" for="CustomCheck5">MS-SQL Server 2000-2012/T-SQL</label>
        </div>
        <div class="custom-control custom-checkbox form-control form-7">
            <input type="checkbox" class="custom-control-input" id="CustomCheck6" value="oracle" >
            <label class="custom-control-label" for="CustomCheck6">Oracle</label>
        </div>
        <div class="custom-control custom-checkbox form-control form-8">
            <input type="checkbox" class="custom-control-input" id="CustomCheck7" value="mysql" >
            <label class="custom-control-label" for="CustomCheck7">MySQL</label>
        </div>
        <div class="custom-control custom-checkbox form-control form-9" >
            <input type="checkbox" class="custom-control-input" id="CustomCheck8" value="postgresql" >
            <label class="custom-control-label" for="CustomCheck8">PostgreSQL</label><br>
        </div>
        <input type="button" value="Далее"  class="btn btn-primary"
                    onclick="document.getElementById ('d3').style.display = 'none';
                             document.getElementById ('d4').style.display = 'block'">
    </div><br>
    <div id="d4" style="display: none;">
        <div class="form-5 form-group">
            <label for="Question" class="question">Вопрос:</label>
            <input type="text" class="form-control" id="validationTextarea" placeholder="С какими системами контроля версий Вы работали?"> </div>
        <div class="custom-control custom-checkbox form-control form-6">
            <input type="checkbox" class="custom-control-input" id="CustomCheck9" value="git">
            <label class="custom-control-label" for="CustomCheck9">GIT</label>
        </div>
        <div class="custom-control custom-checkbox form-control form-7">
            <input type="checkbox" class="custom-control-input" id="CustomCheck10" value="cvs" >
            <label class="custom-control-label" for="CustomCheck10">CVS</label>
        </div>
        <div class="custom-control custom-checkbox form-control form-8">
            <input type="checkbox" class="custom-control-input" id="CustomCheck11" value="subversion" >
            <label class="custom-control-label" for="CustomCheck11">Subverion</label>
        </div>
        <div class="custom-control custom-checkbox form-control form-9" >
            <input type="checkbox" class="custom-control-input" id="CustomCheck12" value="mercurial" >
            <label class="custom-control-label" for="CustomCheck12">Mercurial</label><br>
        </div>
        <input type="submit" value="Далее" class="btn btn-primary" onclick="convert_to_json(event)">
    </div><br>

    </form>
    <output></output>
</body>
<script>

function convert_to_json(event) {
    event.preventDefault();
    const checArr = arr => arr.filter(({
        checked
    }) => checked).map(({
        value
    }) => value);
    profile = {
         name: FirstName.value,
        lastname: LastName.value,
        city: City.value,
        phone: Phone.value,
        vacancy: Vacancy.value,
    };
    results = {
        Lang_list: checArr([CustomCheck1,
            CustomCheck2,
            CustomCheck3,
            CustomCheck4
        ]),
        SUBD_list: checArr([CustomCheck5,
            CustomCheck6,
            CustomCheck7,
            CustomCheck8
        ]),
        SystemControl_list: checArr([CustomCheck9,
            CustomCheck10,
            CustomCheck11,
            CustomCheck12
        ])
    };

   function recursiveList(data) {
    let newlist = document.createElement("ul"),
        item, children;
        newlist.className = "obj";
    if(Array.isArray(data)) {
       newlist.className = "ar";
       data.forEach(txt => {
       item = document.createElement("li");
       item.appendChild(document.createTextNode(txt));
       newlist.appendChild(item);
       })

    }
    else if(typeof data == "object") Object.keys(data).forEach(keys => {
    item = document.createElement("li");
    item.appendChild(document.createTextNode(keys));
    newlist.appendChild(item);
    children = recursiveList(data[keys]);
    item.appendChild(children)
    })
    else {
    newlist.className = "str";
    item = document.createElement("li");
    item.appendChild(document.createTextNode(data));
    newlist.appendChild(item);
    }
    return newlist
    };

    let json = recursiveList(results);
    let json2 = recursiveList(profile);

    document.querySelector("output").append(json, json2);
}
</script>

</html>

Последний раз редактировалось рони, 18.02.2020 в 14:43.
Ответить с цитированием
  #22 (permalink)  
Старый 18.02.2020, 12:59
Интересующийся
Отправить личное сообщение для Малик Посмотреть профиль Найти все сообщения от Малик
 
Регистрация: 12.02.2020
Сообщений: 23

рони,
Еще один вопрос, а как добавить стилизация ul и li, которые создаются? В скрипте отдельно прописывать что то? То есть, если быть конкретно, могу ли я обращаться к элементу li в css? И если да то как?

Последний раз редактировалось Малик, 18.02.2020 в 13:11.
Ответить с цитированием
  #23 (permalink)  
Старый 18.02.2020, 13:19
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

В css написать классы для ul и li

.myul {
....
}

.myli {
...
}


после создания элементов, добавить им эти классы

let newlist = document.createElement("ul");
newlist.classList.add('myul');
.....
item = document.createElement("li");
item.classList.add('myli');
Ответить с цитированием
  #24 (permalink)  
Старый 18.02.2020, 14:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Малик
стилизация
смотрите пост #21 снова.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переход между формами, с выводом единого результата в финальный массив. Малик Общие вопросы Javascript 4 12.02.2020 14:11
Как сделать вывод результата используя событие Focus? Noriz Общие вопросы Javascript 1 20.05.2017 16:16
Вывод результата в текстовом поле Remca Общие вопросы Javascript 0 02.05.2016 18:22
Вывод результата столбиком? olegalimov Events/DOM/Window 3 04.12.2015 09:34
Суммирование элементов и вывод результата Adverterio Элементы интерфейса 3 26.11.2015 16:36