程序不输出到控制台

Question

我制作了一个程序，当您输入您的分数和最大潜在分数时，将计算百分比 - 根据您分配的百分比将记录到控制台。我以前可以让它工作，但现在不行了，我似乎找不到问题所在，你能告诉我我做错了什么以及如何解决它吗？

此外，目前在输入分数和最大潜在分数后，由于“更改”事件侦听器，用户必须单击屏幕上的任意位置。有没有一种方法可以输入数据，但在按下提交按钮后，才会计算成绩（类似于普通网站）——而不是点击任何地方。

谢谢

   const text = function() {
        const max = document.getElementById("totalInput")
        const score = document.getElementById("totalScore")

        max.addEventListener("change", function(inputMax) {
           const result1 = inputMax.target.value
            score.addEventListener("change", function(inputScore) {
               const result2 = inputScore.target.value
                const percentage = result2 / result1
                if (percentage >= 80 && percentage <= 100) {
                    console.log(`you recieved an A - ${percentage}`);
                } else if (percentage >= 70 && percentage <= 79) {
                    console.log(`you recieved an B - ${percentage}`);
                } else if (percentage >= 50 && percentage <= 69) {
                    console.log(`you recieved an C - ${percentage}`);
                } else if (percentage >= 40 && percentage <= 49) {
                    console.log(`you recieved an D - ${percentage}`);
                } 
            })
        })
    }

    text()

<!DOCTYPE html>
<head>
    <title>Grade Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Grade Calculator</h1>
    <h3>Please Enter your score:</h3>
    <input id="totalInput" type="text" placeholder="Max possible score">
    <input id="totalScore" type="text" placeholder="Score">
    <div id="outputresults">
        
    </div>
    <H3>Click anywhere on the screen after entering score to recieve result!</H3>
    <script src="grade.js"></script>
</body>
</html>

Answer 1

在不偏离您的原始代码太多的情况下，我调整了一些内容以使您的控制台再次登录。我还添加了一个按钮来计算您的逻辑，而不是使用您在每个输入上使用的耦合 onchange 事件来触发您的功能。

此外，我决定排除你的包装 text() 功能，因为它不是必需的。

奇怪的是，您的逻辑并未考虑所有结果，也没有最终的 else 语句来处理超出您设置的条件的情况。

请参阅下面的代码片段，其中包含对添加的代码的一些简短注释。

const max = document.getElementById("totalInput")
const score = document.getElementById("totalScore")
//declare btn as variable
const btn = document.getElementById("btn")

//when button is clicked run the function
btn.addEventListener("click", function() {
  const result1 = max.value
  const result2 = score.value
  const percentage = result2 / result1
  if (percentage >= 0.80 && percentage <= 1) {
    console.log(`you recieved an A - ${percentage}`);
  } else if (percentage >= 0.70 && percentage <= 0.79) {
    console.log(`you recieved an B - ${percentage}`);
  } else if (percentage >= 0.50 && percentage <= 0.69) {
    console.log(`you recieved an C - ${percentage}`);
  } else if (percentage >= 0.40 && percentage <= 0.49) {
    console.log(`you recieved an D - ${percentage}`);
  }
  //there should probably be a final else statement down here to handle cases outside of your declared logic above
})

<!DOCTYPE html>

<head>
  <title>Grade Calculator</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Grade Calculator</h1>
  <h3>Please Enter your score:</h3>
  <input id="totalInput" type="text" placeholder="Max possible score">
  <input id="totalScore" type="text" placeholder="Score">
  <!--Button added to calculate score-->
  <button id="btn">Calculate</button>
  <div id="outputresults">

  </div>
  <H3>Click button after entering score to recieve result!</H3>
  <script src="grade.js"></script>
</body>

</html>

程序不输出到控制台

program does not output to console

html

javascript

css

calculator