Результаты оператора if и switch отображаются неправильно - PullRequest
0 голосов
/ 30 октября 2018

Я пытаюсь написать небольшую программу на javascript, которая будет выполнять 3 вещи: 1. она определит, является ли число нечетным или четным, и отобразит результат на веб-странице, 2. вычислит буквенную оценку на основе числа, введенного в веб-страница с помощью оператора switch и 3. сбросьте форму, нажав кнопку.

Кажется, что нечетные и четные части и части сброса работают нормально, но оператор переключения уровня не работает. Кажется, он не отображает буквенную оценку, которая соответствует введенному значению. Я попытался посмотреть на ошибку, но мне не повезло. Любая помощь приветствуется.

 <!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>WDV221 Intro Javascript</title>
        <script src="Odd_Even_Grades.js"></script>
    </head>

    <body>
        <h2>WDV221 Intro Javascript</h2>
        <h3>Comparisons and IF Statements - Odds Evens and Grades</h3>
        <hr />
        <p></p>
        <hr />
        <form id="form1" name="form1" method="post" action="">
            <p>Value 1:
                <input type="text" name="Value1" id="Value1" />
            </p>
            <p>Result: <span id="Result"></span></p>
            <p>
                <input type="button" value="Is it Odd or Even?" onclick="OddEven()"/>
            </p>
            <p>
            </p>
            <h4>Enter the percentage that you have achieved:</h4>
            <p> Percentage:
                <input type="text" name="percent" id="percent" />
            </p>
            <p>Grade: <span id="Score"></span></p>
            <p>
                <input type="button" value="Calculate Grade" onclick="ConvertGrade()"/>
            </p>
            <p>
                <input type="button" name="Reset" id="button" value="Reset" onclick="ResetForm()"/>
            </p>
        </form>

        <p>Instructions:</p>
        <ol>
            <li>You are asked to create a working example in Javascript based upon the two given problems.</li>
            <li>For each problem you have two deliverables:</li>
            <li>Pseudo code algorithm and test plan.</li>
            <li>A working example using Javascript.</li>
            <li>The two problems you have been asked to resolve:</li>
            <li>Get an input value, verify that it is a number, if it is a number determine whether it is even or odd.</li>
            <li>Find the letter grade based upon the percentage grade.   example: 54% is an 'F', 88% is a 'B', etc. This would be a good one to consider using a switch statement.</li>
        </ol>
    </body>
</html>

    function ResetForm()
{
    document.getElementById("form1").reset();
    document.getElementById("Result").innerHTML = "";
    document.getElementById("Grade").innerHTML;
}

function OddEven() {
    //read in entered values from text fields
    var Num1 = document.getElementById("Value1").value;

        if (Num1 % 2 == 0)
        {
            document.getElementById("Result").innerHTML = "Even";
        }
        else
        {
            document.getElementById("Result").innerHTML = "Odd";
        }
}

function ConvertGrade()
{

    var grade = document.getElementById("percent").value;

    {
        case (grade >= 93.0 && grade <= 100):
            LetterGrade = "A";
            break;
        case (grade >= 92.9 && grade <= 90.0):
            LetterGrade = "A-";
            break;
        case (grade >= 89.9 && grade <= 87.0):
            LetterGrade = "B+";
            break;
        case (grade >= 86.9 && grade <= 83.0):
            LetterGrade = "B";
            break;
        case (grade >= 82.9 && grade <= 80.0):
            LetterGrade = "B-";
            break;
        case (grade >= 79.9 && grade <= 70.0):
            LetterGrade = "C";
            break;
        case (grade >= 69.9 && grade <= 60.0):
            LetterGrade = "D";
            break;
        case (grade >= 59.9 && grade <= 0):
            LetterGrade = "F";
            break;
        default:
            LetterGrade = "Enter valid Number"
    }
    document.getElementById("score").innerHTML = LetterGrade;

}

Ответы [ 3 ]

0 голосов
/ 30 октября 2018

Есть несколько проблем с вашим кодом:

  • Как указывало @ rlemon , у вас есть span с id="Score", но вы пытаетесь найти его под score (обратите внимание на регистр букв) в ConvertGrade() и под Grade в ResetForm().

  • В операторе switch отсутствует ключевое слово switch и соответствующее выражение. Я думаю, вы хотели использовать switch (true).

  • Условия в каждом case внутри switch наоборот:

grade >= 92.9 && grade <= 90.0
// no number is greater than 92.9 and smaller than 90.0
  • Если вы используете <= и >=, бессмысленно устанавливать пределы в 93 и 92,9. Вместо этого сделайте >= 93 и < 93.

  • На самом деле, вам это не нужно. Вы используете оператор break, поэтому нет необходимости устанавливать верхний и нижний предел для каждого case. Установите только нижний.

  • Нет данных для проверки, предоставленной в Value1, чтобы проверить, является ли значение на самом деле числом. (спасибо @A.Meshu)

  • Вы не чистите элемент score в ResetForm() (я уже говорил, что вы назвали его Grade, теперь я имею в виду, что вы забыли = '' после innerHTML.

Один дополнительный совет. Существует несколько соглашений для написания имени атрибутов HTML и переменных JavaScript. Я не собираюсь рекомендовать вас. Я просто советую вам выбрать один и придерживаться его. Это избавит вас от головной боли в будущем.

Ваш код должен выглядеть как в приведенном ниже фрагменте кода:

function ResetForm() {
  document.getElementById("form1").reset();
  document.getElementById("Result").innerHTML = "";
  document.getElementById("score").innerHTML = "";
}

function OddEven() {
  //read in entered values from text fields
  var Num1 = document.getElementById("Value1").value;

  if (Number.isInteger(+Num1)) {
    if (Num1 % 2 == 0) {
      document.getElementById("Result").innerHTML = "Even";
    } else {
      document.getElementById("Result").innerHTML = "Odd";
    }
  } else {
    document.getElementById("Result").innerHTML = "Not a integer";
  }
}

function ConvertGrade() {
  var grade = document.getElementById("percent").value;

  switch (true) {
    case (grade >= 93.0):
      LetterGrade = "A";
      break;
    case (grade >= 90.0):
      LetterGrade = "A-";
      break;
    case (grade >= 87.0):
      LetterGrade = "B+";
      break;
    case (grade >= 83.0):
      LetterGrade = "B";
      break;
    case (grade >= 80.0):
      LetterGrade = "B-";
      break;
    case (grade >= 70.0):
      LetterGrade = "C";
      break;
    case (grade >= 60.0):
      LetterGrade = "D";
      break;
    case (grade >= 0):
      LetterGrade = "F";
      break;
    default:
      LetterGrade = "Enter valid Number"
  }
  document.getElementById("score").innerHTML = LetterGrade;
}
<form id="form1" name="form1" method="post" action="">
  <p>Value 1:
    <input type="text" name="Value1" id="Value1" />
  </p>
  <p>Result: <span id="Result"></span></p>
  <p>
    <input type="button" value="Is it Odd or Even?" onclick="OddEven()" />
  </p>
  <p>
  </p>
  <h4>Enter the percentage that you have achieved:</h4>
  <p> Percentage:
    <input type="text" name="percent" id="percent" />
  </p>
  <p>Grade: <span id="score"></span></p>
  <p>
    <input type="button" value="Calculate Grade" onclick="ConvertGrade()" />
  </p>
  <p>
    <input type="button" name="Reset" id="button" value="Reset" onclick="ResetForm()" />
  </p>
</form>
0 голосов
/ 31 октября 2018

Другие пользователи писали о некоторых других проблемах с вашим кодом, поэтому я не буду повторять это, но я хочу написать о вашем использовании switch.

Хотя вам, возможно, советовали, что switch может здесь хорошо контролировать, для ваших целей условия if гораздо более подходящие и более короткие. switch часто адаптировался к другим случаям (часто встречается там, где switch (true) и где случаи - это тесты против утверждений, которые необходимо разрешить, а не отдельные значения, такие как , в документации предлагается ), но я думаю, что это неправильно.

Итак, вот подробное описание того, как ряд условий if может работать лучше, чем switch в этой ситуации. Надеюсь, что это пригодится.

// pick up the container elements
const q1 = document.querySelector('#q1');
const q2 = document.querySelector('#q2');

// attach change listeners to the input boxes
q1.querySelector('input').addEventListener('change', handleOddEven, false);
q2.querySelector('input').addEventListener('change', handlePercentage, false);

function oddEven(n) {

  // ternary operator which says
  // if the modulo of 2 is 0 return even, otherwise odd
  return n % 2 === 0 ? 'even' : 'odd';
}

function findLetterGrade(n) {
  let grade = 'A';

  // drop through the conditions to match the grade
  if (n <= 93) grade = 'A-';
  if (n <= 90) grade = 'B';
  if (n <= 87) grade = 'B-';
  if (n <= 83) grade = 'C';
  if (n <= 80) grade = 'D';
  if (n <= 70) grade = 'E';
  if (n <= 60) grade = 'F';
  return grade;
}

function handlePercentage() {

  // coerce the string value to a number
  const val = parseInt(this.value, 10);

  // add the returned result from findLetterGrade to the
  // textContent of the corresponding span
  q2.querySelector('span').textContent = findLetterGrade(val);
}

function handleOddEven() {
  const val = parseInt(this.value, 10);

  // is the value a number?
  const isNumber = !Number.isNaN(val);
  let txt;
  if (isNumber) {
    txt = `This is a number. It is ${oddEven(val)}`;
  } else {
    txt = 'This is not a number';
  }
  q1.querySelector('span').textContent = txt;
}
<div id="q1"><input type="text" placeholder="Add number" /><span></span></div>
<div id="q2"><input type="text" placeholder="Add percentage" /><span></span></div>
0 голосов
/ 30 октября 2018

Я думаю, что ваш синтаксис переключателя неверен.

switch(expression) {
case x:
    code block
    break;
case y:
    code block
    break;
default:
    code block
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...