javascript 表单通过 2 个函数获取值答案

【问题标题】：javascript form get value with 2 functions javascriptjavascript 表单通过 2 个函数获取值
【发布时间】：2018-06-25 22:04:00
【问题描述】：

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('点击检测');

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>

【问题讨论】：

你正在加载 jQuery 你的 test.js 脚本。更改顺序，看看是否有效。使用browser console (dev tools)（点击F12）并阅读任何错误。
Uncaught ReferenceError: $ is not defined?的可能重复
@Xufox 我认为这不一定是重复的。甚至没有足够的信息知道。
它仍然无法解决我的代码问题，当我提交表单时，我无法获得价值。

标签： javascript jquery html forms

【解决方案1】：

你的脚本抛出一个错误：

“未捕获的类型错误：无法读取 null 的属性 'addEventListener'”

这是被这条线抛出的：

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

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

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

正如其他人在 cmets 中所说，您需要在 test.js 脚本之前包含 jQuery 脚本：

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

更新了 sn-p：

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>

【讨论】：

我将 id=choice 添加到我的输入中，但出现此错误：TypeError: document.querySelector(...) is null
Sur quel input l'as tu ajouté? Dans la réponse je te conseille de l'ajouter sur la select。
j ai essayé sur le select mais des que je valide mon formulaire rien ne s affiche je suis supposé avoir le message : Click détecté pour la deuxième fois
星期二？ Je l'ai testé dans mon sn-p et ça marche。 Peux-tu éditer ta question et ajouter la modify que tu as faite ?
@hlklbklk Ton Premier sn-p fonctionne。 Celui où tu as ajouté l'id.