英文:
How to get the choice(value) out of datalist in javascript?
问题
我正在开发一个概率计算器，但我无法从datalist中获取'value'。我对JavaScript非常陌生，也许这很容易，但我还不知道该如何做。
我尝试使用object.value，但似乎不起作用。你有什么想法？
以下是我的JavaScript代码：
// 测试
let test = document.getElementById("name");
test.addEventListener("input", () => console.log(test.value));
// 变量
let q = document.getElementById("submit");
let q1 = document.getElementById("q1");
q.addEventListener('click', () => console.log("works"));
q.addEventListener('click', probability_calculation());
function probability_calculation() {
if (q1.value === 'Rap') {
alert("works");
console.log("works well");
} else if (q1.value === 'Alter') {
console.log('33%');
} else if (q1.value === 'Pop') {
console.log('97%');
}
}
<h1 class="header">Probability Calculator</h1>
<div>
<input type="text" placeholder="Enter your name" id="name">
<input list="q1" placeholder="What is your favourite type of music?">
</div>
<panel class="center-q">
<datalist id="q1">
<option>Rap</option>
<option>Alter</option>
<option>Pop</option>
</datalist>
</panel>
<input type="submit" id="submit">
请注意，这里没有提供完整的翻译，因为代码部分不需要翻译。如果你有其他问题或需要进一步的帮助，请告诉我。
英文:
I am developing a probability calculator and I can't manage to get the 'value' out of the datalist. I'm very new to javascript so maybe it's very easy but I don't know how to do it yet.
I tried using object.value but it does not seem to work. Do you have any ideas?
Here's my javascript code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
//test
let test = document.getElementById("name");
test.addEventListener("input", () => console.log(test.value));
// variables
let q = document.getElementById("submit");
let q1 = document.getElementById("q1");
q.addEventListener('click', () => console.log("works"));
q.addEventListener('click', probability_calculation()));
function probability_calculation() {
if (q1.value === 'Rap') {
alert("works");
console.log("works well");
} else if (q1.value === 'Alter') {
console.log('33%');
} else if (q1.value === 'Pop') {
console.log('97%');
}
}
<!-- language: lang-html -->
<h1 class="header">Probability Calculator</h1>
<div>
<input type="text" placeholder="Enter your name" id="name">
<input list="q1" placeholder="What is your favourite type of music?">
</div>
<panel class="center-q">
<datalist id="q1">
<option>Rap</option>
<option>Alter</option>
<option>Pop</option>
</datalist>
</panel>
<input type="submit" id="submit">
<!-- end snippet -->
答案1
得分: 1
在这一行中：
q.addEventListener('click', probability_calculation()));
- 你多了一个多余的闭括号字符
- 你不应该调用
probability_calculation函数，而只需将它本身作为回调处理程序传递给事件监听器
正确的版本是：
q.addEventListener('click', probability_calculation);
此外，你有两个具有相同标识符q1的标签。
我简化了你的datalist部分，使用简单的select来展示工作版本。
查看jsfiddle。
英文:
In this line
q.addEventListener('click', probability_calculation()));
- You have an extra closing parentheses character
- You should not call
probability_calculationfunction but just pass it itself as a callback handler to event listener
The correct version is
q.addEventListener('click', probability_calculation);
Also, you have two tags with the same identifier q1.
I simplified your datalist stuff to simple select in order to show the working version.
See jsfiddle
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论