Форма javascript получить значение с 2 функциями javascript - PullRequest
Новая
       1

Форма javascript получить значение с 2 функциями javascript

0 голосов
/ 26 июня 2018 
document.querySelector("button").addEventListener("click", function () {
    console.log('Click détecté ');
        var form = document.createElement('form');
            form.setAttribute('method', 'GET');
            form.setAttribute('id', 'formSelectNbColumns');

            document.body.appendChild(form);


            let monSelect = document.createElement('select');
            monSelect.setAttribute('id', 'choice');
            monSelect.setAttribute('name', 'premier');
                let monOption = document.createElement('option');
                    monOption.setAttribute('value', 1);
                    monOption.innerText = 'choice1';
                    monSelect.appendChild(monOption);
                let monOption2 = document.createElement('option');
                    monOption2.setAttribute('value', 2);
                    monOption2.innerText = 'choice2';
                    monSelect.appendChild(monOption2);
           form.appendChild(monSelect);
            let input = document.createElement('input')
            input.setAttribute('type', "submit");

            input.setAttribute('value', "submit");
            form.appendChild(input);

            document.querySelector("#choice").addEventListener("click", function () {
    console.log('Click détecté pour la deuxieme fois'); 

let formSelect = $('#formSelectNbColumns');
            let optionSelected = $("option:selected", formSelect);
            console.log('Valeur sélectionné : ' + optionSelected.val());

       });
        }
    );


<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Quelques langages</title>
</head>

<body>
    <button id="test">Ajouter un block</button>
<script src="jquery-3.3.1.min.js"></script>
    <script src="test.js"></script>

</body></html>

Я пытаюсь сделать форму с помощью JavaScript, но у меня проблема.Я не знаю, как получить значение только с помощью JavaScript.Я написал этот код, но он не работает.Я не понимаю почему.Я знаю, что этот код очень прост, но я хочу понять, как это сделать.

document.querySelector ("кнопка"). AddEventListener ("click", function () {console.log ('Click détecté' '); 

var form = document.createElement('form');
        form.setAttribute('method', 'GET');
        form.setAttribute('id', 'formSelectNbColumns');

        document.body.appendChild(form);

        let monSelect = document.createElement('select');
        monSelect.setAttribute('name', 'premier');

        let monOption = document.createElement('option');
        monOption.setAttribute('value', 1);
        monOption.innerText = 'choice1';
        monSelect.appendChild(monOption);

        let monOption2 = document.createElement('option');
        monOption2.setAttribute('value', 2);
        monOption2.innerText = 'choice2';
        monSelect.appendChild(monOption2);
        form.appendChild(monSelect);

        let input = document.createElement('input')
        input.setAttribute('type', "submit");

        input.setAttribute('value', "submit");
        form.appendChild(input);

        document.querySelector("#choice").addEventListener("click", function() {
            console.log('Click détecté pour la deuxieme fois');

            let formSelect = $('#formSelectNbColumns');
            let optionSelected = $("option:selected", formSelect);
            console.log('Valeur sélectionné : ' + optionSelected.val());
        });
    }
);


<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Quelques langages</title>
</head>

<body>
    <button id="test">Ajouter un block</button>

    <script src="test.js"></script>
    <script src="jquery-3.3.1.min.js"></script>
</body></html>

1 Ответ

0 голосов
/ 26 июня 2018

Ваш скрипт выдает ошибку:

"Uncaught TypeError: Невозможно прочитать свойство 'addEventListener' of null"

Выдается этой строкой: 

document.querySelector("#choice").addEventListener("click", function() {...});

Эту проблему можно решить, выбрав '1010 * * вашего элемента select: 

monSelect.setAttribute('id', 'choice');

И, как уже говорили другие в комментариях, вам необходимо включить скрипт jQuery.перед вашим сценарием test.js: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="test.js"></script>

Обновленный фрагмент: 

document.querySelector("button").addEventListener("click", function() {
        console.log('Click détecté ');
        var form = document.createElement('form');
        form.setAttribute('method', 'GET');
        form.setAttribute('id', 'formSelectNbColumns');

        document.body.appendChild(form);

        let monSelect = document.createElement('select');
        monSelect.setAttribute('name', 'premier');
        monSelect.setAttribute('id', 'choice');
        let monOption = document.createElement('option');
        monOption.setAttribute('value', 1);
        monOption.innerText = 'choice1';
        monSelect.appendChild(monOption);
        let monOption2 = document.createElement('option');
        monOption2.setAttribute('value', 2);
        monOption2.innerText = 'choice2';
        monSelect.appendChild(monOption2);
        form.appendChild(monSelect);
        let input = document.createElement('input')
        input.setAttribute('type', "submit");
        input.setAttribute('value', "submit");
        form.appendChild(input);

        document.querySelector("#choice").addEventListener("click", function() {
            console.log('Click détecté pour la deuxieme fois');

            let formSelect = $('#formSelectNbColumns');
            let optionSelected = $("option:selected", formSelect);
            console.log('Valeur sélectionné : ' + optionSelected.val());

        });
    }
);
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Quelques langages</title>
</head>

<body>
    <button id="test">Ajouter un block</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="test.js"></script>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...