英文:
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 -->
//testlet test = document.getElementById("name");test.addEventListener("input", () => console.log(test.value));// variableslet 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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论