javascript表单通过两个函数获取值
javascript表单通过两个函数获取值
提问于 2018-06-26 06:04:01
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('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
Stack Overflow用户
发布于 2018-06-26 06:26:25
你的脚本抛出一个错误：
“未捕获TypeError:无法读取null的属性'addEventListener‘”
它由下面这行抛出：
document.querySelector("#choice").addEventListener("click", function() {...});这个问题可以通过“选择”select元素的id来解决：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51032381
复制相关文章
相似问题