html 根据JS中的选项列表检查用户输入的值

liwlm1x9  于 2022-11-27  发布在  其他
关注(0)|答案(1)|浏览(165)

给定文本输入,用户可以通过提交点击按钮Enter键提交答案:

  1. </div>
  2. <div class="answer">
  3. <input type="text" placeholder="Enter your answer" class="answer_text" id="answer_text_box">
  4. <input type="button" value="Answer" class="submit_button" id="answer_submit_button">
  5. </div>

我想在用户提交答案后获取用户输入的文本值,可能会将其与项目列表list_options进行比较。
这里是我干活的地方;由于我对JS非常陌生,我想到将值写入html文档中的保持器标记,然后重新读取html文件并获取值..这似乎效率不高,因为我已经通过**.addEventListener**获取了值:

  1. <div class="user_answer" id="user_answer_for_js"></div>

以下是我在JavaScript中的工作:

  1. const answer_area = document.getElementById('answer_text_box');
  2. const answer_btn = document.getElementById('answer_submit_button');
  3. let list_options = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  4. // Load all events listerns
  5. loadEventListeners();
  6. // Load all events listerns
  7. function loadEventListeners() {
  8. // Submit answer via submit button:
  9. answer_btn.addEventListener('click', submitButtonClick);
  10. // Submit answer via enter key:
  11. answer_area.addEventListener('keyup', submitEnterKey);
  12. }
  13. function submitButtonClick(e) {
  14. let user_answer = answer_area.value;
  15. document.getElementById("user_answer_for_js").textContent = user_answer.trim();
  16. console.log(`Submit Via Enter Button: ${user_answer}`);
  17. e.preventDefault();
  18. }
  19. function submitEnterKey(e) {
  20. if (e.keyCode === 13) {
  21. let user_answer = answer_area.value;
  22. document.getElementById("user_answer_for_js").textContent = user_answer.trim();
  23. console.log(`Submit Via Enter Key: ${user_answer}`);
  24. e.preventDefault();
  25. }
  26. }
lqfhib0f

lqfhib0f1#

    • 1.要获取用户答案**你必须在html元素加载后加载你的脚本。现在你的代码正在获取一个尚未加载的html元素。

为此,请将您的<script>标签放在您的<body>标签的结尾之前:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. </div>
  11. <div class="answer">
  12. <input type="text" placeholder="Enter your answer" class="answer_text" id="answer_text_box">
  13. <input type="button" value="Answer" class="submit_button" id="answer_submit_button">
  14. </div>
  15. <div class="user_answer" id="user_answer_for_js"></div>
  16. <script src="index.js"></script>
  17. </body>
  18. </html>
  1. let list_options = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  2. let user_answer = "January";
  3. list_options.includes(user_answer); # False
  4. user_answer = "Monday";
  5. list_options.includes(user_answer); # True

希望能有所帮助!

展开查看全部

相关问题