css 页面不响应用户输入

4ioopgfo  于 2024-01-09  发布在  其他
关注(0)|答案(2)|浏览(119)

我刚刚开始使用JavaScript和HTML，我的第一个任务是创建一个简短的琐事页面。我的任务是创建一个多项选择测验，如果这是正确的答案选择，按钮就会变成绿色，否则就会变成红色。对于我的问题，正确的答案选择是2。如果我按下正确的答案选择或错误的答案选择，什么都不会发生。

  1. body {
  2.     background-color: #fff;
  3.     color: #212529;
  4.     font-size: 1rem;
  5.     font-weight: 400;
  6.     line-height: 1.5;
  7.     margin: 0;
  8.     text-align: left;
  9. }
  11. .container {
  12.     margin-left: auto;
  13.     margin-right: auto;
  14.     padding-left: 15px;
  15.     padding-right: 15px;
  16. }
  18. .header {
  19.     background-color: #477bff;
  20.     color: #fff;
  21.     margin-bottom: 2rem;
  22.     padding: 2rem 1rem;
  23.     text-align: center;
  24. }
  26. .section {
  27.     padding: 0.5rem 2rem 1rem 2rem;
  28. }
  30. .section:hover {
  31.     background-color: #f5f5f5;
  32.     color: #477bff;
  33.     transition: color 10s ease-in-out, background-color 0.15s ease-in-out;
  34. }
  36. h1 {
  37.     font-family: 'Montserrat', sans-serif;
  38.     font-size: 48px;
  39. }
  41. button, input[type="submit"] {
  42.     background-color: #d9edff;
  43.     border: 1px solid transparent;
  44.     border-radius: 0.25rem;
  45.     font-size: 0.95rem;
  46.     font-weight: 400;
  47.     line-height: 1.5;
  48.     padding: 0.375rem 0.75rem;
  49.     text-align: center;
  50.     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  51.     vertical-align: middle;
  52. }
  54. input[type="text"] {
  55.     line-height: 1.8;
  56.     width: 25%;
  57. }
  59. input[type="text"]:hover {
  60.     background-color: #f5f5f5;
  61.     transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
  62. }

个字符
我试图在JavaScript中创建一个检查函数，根据按钮编号评估正确性，但似乎什么也没有发生。

css

2条答案

按热度按时间
zxlwwiss

zxlwwiss1#

为了让你的代码段工作，你必须在你的数字id前面添加一个字母，因为否则你会在选择它们时遇到CSS相关的问题，请参阅下面Scott Marcus的评论和这个页面：https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/

  1. body {
  2.     background-color: #fff;
  3.     color: #212529;
  4.     font-size: 1rem;
  5.     font-weight: 400;
  6.     line-height: 1.5;
  7.     margin: 0;
  8.     text-align: left;
  9. }
  11. .container {
  12.     margin-left: auto;
  13.     margin-right: auto;
  14.     padding-left: 15px;
  15.     padding-right: 15px;
  16. }
  18. .header {
  19.     background-color: #477bff;
  20.     color: #fff;
  21.     margin-bottom: 2rem;
  22.     padding: 2rem 1rem;
  23.     text-align: center;
  24. }
  26. .section {
  27.     padding: 0.5rem 2rem 1rem 2rem;
  28. }
  30. .section:hover {
  31.     background-color: #f5f5f5;
  32.     color: #477bff;
  33.     transition: color 10s ease-in-out, background-color 0.15s ease-in-out;
  34. }
  36. h1 {
  37.     font-family: 'Montserrat', sans-serif;
  38.     font-size: 48px;
  39. }
  41. button, input[type="submit"] {
  42.     background-color: #d9edff;
  43.     border: 1px solid transparent;
  44.     border-radius: 0.25rem;
  45.     font-size: 0.95rem;
  46.     font-weight: 400;
  47.     line-height: 1.5;
  48.     padding: 0.375rem 0.75rem;
  49.     text-align: center;
  50.     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  51.     vertical-align: middle;
  52. }
  54. input[type="text"] {
  55.     line-height: 1.8;
  56.     width: 25%;
  57. }
  59. input[type="text"]:hover {
  60.     background-color: #f5f5f5;
  61.     transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
  62. }

个字符
除此之外，您应该遵循DRY（不要重复自己）规则并重写代码，以便只有.addEventListener()赋值。
的

  1. button=document.querySelector(`#${id}`)

型
check()函数中的赋值也可以替换为：

  1. button=id

型
在这两种情况下，它前面都应该有一个let，否则会污染全局名称空间。

展开查看全部
赞(0）分享  回复(0）举报  2024-01-09
idv4meu8

idv4meu82#

您遇到的核心问题是您正在调用尚未在页面上创建的HTML元素。通过降低JavaScript，您可以正确调用HTML元素。
另一个我看到你遇到的问题是你的id是数字。你可以用数字来表示id，但是在id中使用字母可以让你很容易地识别你是在使用字符串还是数字。
这使我能够制作一个可以工作的代码版本（参见下面的代码片段）。

  1. // TODO: Add code to check answers to questions
  2. function check(id) {
  4.   // Account for the id's now being strings starting with the word 'button'
  5.   button = document.querySelector(`#button${id}`);
  6.   
  7.   if (id == '2') {
  8.     button.style.backgroundColor = 'green';
  9.   } else {
  10.     button.style.backgroundColor = 'red';
  11.   }
  12. }
  13. document.getElementById('button1').addEventListener('click', function() {
  14.   check('1');
  15. });
  16. document.getElementById('button2').addEventListener('click', function() {
  17.   check('2');
  18. });
  19. document.getElementById('button3').addEventListener('click', function() {
  20.   check('3');
  21. });
  22. document.getElementById('button4').addEventListener('click', function() {
  23.   check('4');
  24. });
  1. body {
  2.   background-color: #fff;
  3.   color: #212529;
  4.   font-size: 1rem;
  5.   font-weight: 400;
  6.   line-height: 1.5;
  7.   margin: 0;
  8.   text-align: left;
  9. }
  11. .container {
  12.   margin-left: auto;
  13.   margin-right: auto;
  14.   padding-left: 15px;
  15.   padding-right: 15px;
  16. }
  18. .header {
  19.   background-color: #477bff;
  20.   color: #fff;
  21.   margin-bottom: 2rem;
  22.   padding: 2rem 1rem;
  23.   text-align: center;
  24. }
  26. .section {
  27.   padding: 0.5rem 2rem 1rem 2rem;
  28. }
  30. .section:hover {
  31.   background-color: #f5f5f5;
  32.   color: #477bff;
  33.   transition: color 10s ease-in-out, background-color 0.15s ease-in-out;
  34. }
  36. h1 {
  37.   font-family: 'Montserrat', sans-serif;
  38.   font-size: 48px;
  39. }
  41. button,
  42. input[type="submit"] {
  43.   background-color: #d9edff;
  44.   border: 1px solid transparent;
  45.   border-radius: 0.25rem;
  46.   font-size: 0.95rem;
  47.   font-weight: 400;
  48.   line-height: 1.5;
  49.   padding: 0.375rem 0.75rem;
  50.   text-align: center;
  51.   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  52.   vertical-align: middle;
  53. }
  55. input[type="text"] {
  56.   line-height: 1.8;
  57.   width: 25%;
  58. }
  60. input[type="text"]:hover {
  61.   background-color: #f5f5f5;
  62.   transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
  63. }
  1. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
  7.   <link href="styles.css" rel="stylesheet">
  8.   <title>Trivia!</title>
  9. </head>
  11. <body>
  12.   <div class="header">
  13.     <h1>Trivia!</h1>
  14.   </div>
  15.   <div class="container">
  16.     <div class="section">
  17.       <h2> Part 1: Multiple Choice </h2>
  18.       <hr>
  19.       <!-- TODO: Add multiple choice question here -->
  20.       <h3>
  21.         What does the Mushroom tell the other Mushroom when they're the only Mushrooms in their world?
  22.       </h3>
  23.       <!-- Add letters into your id's, this way your id's won't be confused for numbers when they are strings -->
  24.       <button id="button1"> I'm a Fun Guy!</button>
  25.       <button id="button2">There's 2 mushroom?</button>
  26.       <button id="button3"> Let me trufle over to you.</button>
  27.       <button id="button4"> "Sigh". Lets wallop on the pizza-ria...</button>
  28.     </div>
  29.     <div class="section">
  30.       <h2>Part 2: Free Response</h2>
  31.       <hr>
  32.       <!-- TODO: Add free response question here -->
  33.     </div>
  34.   </div>
  35.   <!-- Add your JavaScript here instead -->
  36.   <script>
  37.   </script>
  38. </body>
  40. </html>
展开查看全部
赞(0）分享  回复(0）举报  2024-01-09
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com