Форум

Малик · #11 (**permalink**) 13.02.2020, 11:12

Извиняюсь ребят, но я так и не врубаюсь как в данный скрипт добавить блок и сделать так чтобы он туда выводился вместо окна alert. Извиняюсь за тупняк)
[script]
function convert_to_json() {
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
])
};
let json = JSON.stringify(results);
let json2 = JSON.stringify(profile)
alert ("profile: " + json2 + "results: " + json);
}
[/script]

Малик · #12 (**permalink**) 13.02.2020, 11:15

Извиняюсь ребят, но я так и не могу разобраться как правильно будет в данный скрипт вставить вместо alert, блок, который будет появляться с json строкой.

function convert_to_json() {
    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
        ])
    };
    let json = JSON.stringify(results);
    let json2 = JSON.stringify(profile)
    alert ("profile: " + json2 + "results: " + json);
}

рони · #13 (**permalink**) 13.02.2020, 11:24

Малик,
медитировать строки: 100, 104, 108, 109, 142.

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</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>
    <pre></pre>
</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
        ])
    };
    let json = JSON.stringify(results,"", 4);
    let json2 = JSON.stringify(profile, "", 4);

    document.querySelector("pre").innerHTML = "profile: " + json2 + "\nresults: " + json
}
</script>

</html>

Малик · #14 (**permalink**) 13.02.2020, 13:32

рони,
А как можно стилизовать строку которая появляется? например сделать переносы строки и пробелы?
У меня получается такая сплошная строка:

profile: { "name": "asdasd", "lastname": "asdasd", "city": "Oskemen", "phone": "+77779870000", "vacancy": "Frontend" }results: { "Lang_list": [ "asp.net" ], "SUBD_list": [ "oracle", "mysql", "postgresql" ], "SystemControl_list": [ "mercurial" ] }

рони · #15 (**permalink**) 13.02.2020, 13:47

Сообщение от Малик

например сделать переносы строки и пробелы?

смотрите код выше снова

Малик · #16 (**permalink**) 17.02.2020, 06:06

рони,
Доброго Вам Утра, хотел поинтересоваться, а как в данном коде, появляющайсе страке дать стилизацию? То есть добавить лейблов, дивов и т.д.
Заранее благолдарю за ответ!

рони · #17 (**permalink**) 17.02.2020, 07:51

Малик,
JSON.stringify заменить на свою функцию, читать про шаблонизатор и вывод данных из json.

Малик · #18 (**permalink**) 18.02.2020, 06:39

рони,
Про шаблонизатор я почитал, нно не могу понять по поводу функции и вывода данных, не можете немного направить?

рони · #19 (**permalink**) 18.02.2020, 10:19

Малик,
пишите как должен выглядеть результат html/css

Малик · #20 (**permalink**) 18.02.2020, 10:56

рони,
Нужно разместить результат по блокам с лейблами внутри них, первый блок с данными профиля(имя, фамилия и т.д.) Второй блок уже с результатами вопросов. Стилей конкретных к использованию от меня не требовали, все на свое усмотрение, главное чтобы не было обычной строкой, как до этого. Заранее благодарю за помощь.

Форум

Справочник

Discord чат

Курсы javascript