Блог

Главная - Вопросы по программированию - программа не выводит на консоль

программа не выводит на консоль

#javascript #html #css #calculator

#javascript #HTML #css #калькулятор

Вопрос:

Я создал программу, в которой при вводе вашего балла и максимального потенциального балла будет рассчитан процент — на основе процента вам будет присвоена оценка, которая будет занесена в консоль. Раньше мне удавалось заставить ее работать, но теперь это не так, и я, похоже, не могу найти проблему, не могли бы вы сказать мне, что я делаю не так и как я могу это исправить.

Также в настоящее время после ввода оценки и максимального потенциального результата пользователь должен щелкнуть в любом месте экрана из-за прослушивателя событий «изменить». Есть ли способ, которым я могу ввести данные, но после нажатия кнопки отправки только тогда будет рассчитана оценка (аналогично обычным веб-сайтам) — вместо того, чтобы нажимать где угодно.

Спасибо

    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 amp;amp; percentage <= 100) {
                    console.log(`you recieved an A - ${percentage}`);
                } else if (percentage >= 70 amp;amp; percentage <= 79) {
                    console.log(`you recieved an B - ${percentage}`);
                } else if (percentage >= 50 amp;amp; percentage <= 69) {
                    console.log(`you recieved an C - ${percentage}`);
                } else if (percentage >= 40 amp;amp; 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>

Комментарии:

1. Плохая практика — привязывать прослушиватель событий внутри прослушивателя событий. каждый раз, когда вы меняете max, добавляется еще одно событие.

2. Вы ожидаете percentage , что это будет целое число — можете ли вы уточнить это? Вероятно, вы имеете в виду сравнение с их десятичным эквивалентом. Процент между 80% и 100% на самом деле нужно было бы сравнить с 0.8 и 1.0 и т. Д… вы имели в виду умножение percentage , чтобы получить его в этой форме?

3. Научитесь отлаживать const percentage = result2 / result1; console.log(percentage)

Ответ №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 amp;amp; percentage <= 1) {
    console.log(`you recieved an A - ${percentage}`);
  } else if (percentage >= 0.70 amp;amp; percentage <= 0.79) {
    console.log(`you recieved an B - ${percentage}`);
  } else if (percentage >= 0.50 amp;amp; percentage <= 0.69) {
    console.log(`you recieved an C - ${percentage}`);
  } else if (percentage >= 0.40 amp;amp; 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>