Question

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（“ button”）。addEventListener（“ click”，function（）{ console.log（'Clickdé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>

Answer 1

您的脚本抛出错误：

“未捕获的TypeError：无法读取null的属性'addEventListener'”

它被以下行抛出：

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

可以通过选择id元素的select来解决：

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

就像其他人在评论中所说的那样，您需要在test.js脚本之前包括jQuery脚本：

<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>

javascript表单通过2个函数获得价值javascript

1 个答案: