css 页面不响应用户输入

4ioopgfo 于 9个月前发布在其他

关注(0)|答案(2)|浏览(83)

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

body {
    background-color: #fff;
    color: #212529;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.header {
    background-color: #477bff;
    color: #fff;
    margin-bottom: 2rem;
    padding: 2rem 1rem;
    text-align: center;
}

.section {
    padding: 0.5rem 2rem 1rem 2rem;
}

.section:hover {
    background-color: #f5f5f5;
    color: #477bff;
    transition: color 10s ease-in-out, background-color 0.15s ease-in-out;
}

h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
}

button, input[type="submit"] {
    background-color: #d9edff;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    text-align: center;
    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;
    vertical-align: middle;
}

input[type="text"] {
    line-height: 1.8;
    width: 25%;
}

input[type="text"]:hover {
    background-color: #f5f5f5;
    transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
}

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

css

来源：https://stackoverflow.com/questions/77729523/page-doesnt-respond-to-user-input

2条答案

按热度按时间

zxlwwiss1#

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

body {
    background-color: #fff;
    color: #212529;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.header {
    background-color: #477bff;
    color: #fff;
    margin-bottom: 2rem;
    padding: 2rem 1rem;
    text-align: center;
}

.section {
    padding: 0.5rem 2rem 1rem 2rem;
}

.section:hover {
    background-color: #f5f5f5;
    color: #477bff;
    transition: color 10s ease-in-out, background-color 0.15s ease-in-out;
}

h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
}

button, input[type="submit"] {
    background-color: #d9edff;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    text-align: center;
    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;
    vertical-align: middle;
}

input[type="text"] {
    line-height: 1.8;
    width: 25%;
}

input[type="text"]:hover {
    background-color: #f5f5f5;
    transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
}

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

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

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

button=id

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

赞(0）回复(0）举报 9个月前

idv4meu82#

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

// TODO: Add code to check answers to questions
function check(id) {

  // Account for the id's now being strings starting with the word 'button'
  button = document.querySelector(`#button${id}`);
  
  if (id == '2') {
    button.style.backgroundColor = 'green';
  } else {
    button.style.backgroundColor = 'red';
  }
}
document.getElementById('button1').addEventListener('click', function() {
  check('1');
});
document.getElementById('button2').addEventListener('click', function() {
  check('2');
});
document.getElementById('button3').addEventListener('click', function() {
  check('3');
});
document.getElementById('button4').addEventListener('click', function() {
  check('4');
});

body {
  background-color: #fff;
  color: #212529;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  text-align: left;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.header {
  background-color: #477bff;
  color: #fff;
  margin-bottom: 2rem;
  padding: 2rem 1rem;
  text-align: center;
}

.section {
  padding: 0.5rem 2rem 1rem 2rem;
}

.section:hover {
  background-color: #f5f5f5;
  color: #477bff;
  transition: color 10s ease-in-out, background-color 0.15s ease-in-out;
}

h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 48px;
}

button,
input[type="submit"] {
  background-color: #d9edff;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.375rem 0.75rem;
  text-align: center;
  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;
  vertical-align: middle;
}

input[type="text"] {
  line-height: 1.8;
  width: 25%;
}

input[type="text"]:hover {
  background-color: #f5f5f5;
  transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
}

<!DOCTYPE html>

<html lang="en">

<head>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
  <link href="styles.css" rel="stylesheet">
  <title>Trivia!</title>
</head>

<body>
  <div class="header">
    <h1>Trivia!</h1>
  </div>
  <div class="container">
    <div class="section">
      <h2> Part 1: Multiple Choice </h2>
      <hr>
      <!-- TODO: Add multiple choice question here -->
      <h3>
        What does the Mushroom tell the other Mushroom when they're the only Mushrooms in their world?
      </h3>
      <!-- Add letters into your id's, this way your id's won't be confused for numbers when they are strings -->
      <button id="button1"> I'm a Fun Guy!</button>
      <button id="button2">There's 2 mushroom?</button>
      <button id="button3"> Let me trufle over to you.</button>
      <button id="button4"> "Sigh". Lets wallop on the pizza-ria...</button>
    </div>
    <div class="section">
      <h2>Part 2: Free Response</h2>
      <hr>
      <!-- TODO: Add free response question here -->
    </div>
  </div>
  <!-- Add your JavaScript here instead -->
  <script>
  </script>
</body>

</html>

赞(0）回复(0）举报 9个月前

我来回答

css 页面不响应用户输入

2条答案

相关问题

热门标签

最新问答