Калькулятор среднего балла, как преобразовать ввод букв в цифры

ProgramBox

Калькулятор среднего балла, как преобразовать ввод букв в цифры

Post author:admin
Запись опубликована:1 марта, 2023
Post category:Вопросы по программированию

#javascript #html #css #forms #letters

#javascript #HTML #css — код #формы #письма #css

Вопрос:

Я пытаюсь создать простой калькулятор среднего балла. Есть 4 формы, и я пытаюсь сделать так, чтобы пользователь вводил 4 буквы (A, B, C, D или F), и каждое из этих чисел представляло значение (A = 4.0, B = 3.0 и т. Д.). И в основном просто получите среднее значение из них всех. Прямо сейчас я просто сделал так, чтобы это работало, если пользователь вводит цифры, но теперь я хочу изменить это, чтобы пользователь вводил буквенные оценки и получал тот же средний балл. Я понятия не имею, как это сделать. Пожалуйста, помогите, спасибо.

(Это мой HTML-код)

 <!DOCTYPE html>
    <html>
        <head>
            <title>GPA Calculator</title>
            <link type="text/css" rel="stylesheet" href="project6.css">
            <script type="text/javascript" src="project6.js"></script>
        </head>
        <body>
            <h1>Enter Your Grades Below</h1>
            <form name="form" id="form">
                <br>
                <input type="text" class="textForm1" name="textForm1"></input><br>
                <input type="text" class="textForm1" name="textForm2"></input><br>
                <input type="text" class="textForm1" name="textForm3"></input><br>
                <input type="text" class="textForm1" name="textForm4"></input><br>
                <button type="button" onClick="getGrade()">Submit</button>
            </form>
            <div id="div">
            </div>
        </body>
    </html>

(Это мой javascript)

 var getGrade = function() {
    var inputOne = document.form.textForm1.value;
    var inputTwo = document.form.textForm2.value;
    var inputThree = document.form.textForm3.value;
    var inputFour = document.form.textForm4.value;
    document.getElementById("div").innerHTML = (Number(inputOne)   Number(inputTwo)   Number(inputThree)   Number(inputFour))/4;
}

1. Как насчет создания функции с переключателем / регистром внутри, которая сопоставляет каждую букву с числовым значением? Вы когда-нибудь слышали о заявлении switch раньше?

2. Я слышал о них, просто не знаком с их использованием, так как я все еще новичок. Я изучу их подробнее, спасибо вам.

Ответ №1:

Основная идея заключается в том, что вы хотите создать сопоставление между буквами и цифрами.

Самым простым из возможных способов сделать это была бы серия if утверждений.

 var input = document.querySelector('input');
input.addEventListener('input', function() {
  var inputValue = input.value;
  if (inputValue === 'A') {
    inputValue = 4.0;
  } else if (inputValue === 'B') {
    inputValue = 3.0;
  } else if (inputValue === 'C') {
    inputValue = 2.0;
  } else if (inputValue === 'D') {
    inputValue = 1.0;
  } else {
    inputValue = 0.0;
  }
  console.log(inputValue);
});

 1: <input type="text" />

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

 function letterToNumber(letter) {
  if (letter === 'A') {
    return 4.0;
  } else if (letter === 'B') {
    return 3.0;
  } else if (letter === 'C') {
    return 2.0;
  } else if (letter === 'D') {
    return 1.0;
  } else {
    return 0.0;
  }
}

document.querySelector('button').addEventListener('click', function() {
  var input1 = document.getElementById('input1').value;
  var input2 = document.getElementById('input2').value;
  var input3 = document.getElementById('input3').value;
  var input4 = document.getElementById('input4').value;
  
  input1 = letterToNumber(input1);
  input2 = letterToNumber(input2);
  input3 = letterToNumber(input3);
  input4 = letterToNumber(input4);
  console.log(input1, input2, input3, input4);
});

 1: <input id="input1" type="text" /><br />
2: <input id="input2" type="text" /><br />
3: <input id="input3" type="text" /><br />
4: <input id="input4" type="text" /><br />
<button>Calculate</button>

Это прекрасно работает. Вы могли бы упростить это еще больше, создав объект, в котором ключи соответствуют букве, а значение соответствует фактическому числовому значению.

 var letterToNumber = {
  A: 4.0,
  B: 3.0,
  C: 2.0,
  D: 1.0
};

document.querySelector('button').addEventListener('click', function() {
  var input1 = document.getElementById('input1').value;
  var input2 = document.getElementById('input2').value;
  var input3 = document.getElementById('input3').value;
  var input4 = document.getElementById('input4').value;
  
  input1 = letterToNumber[input1];
  input2 = letterToNumber[input2];
  input3 = letterToNumber[input3];
  input4 = letterToNumber[input4];
  console.log(input1, input2, input3, input4);
});

 1: <input id="input1" type="text" /><br />
2: <input id="input2" type="text" /><br />
3: <input id="input3" type="text" /><br />
4: <input id="input4" type="text" /><br />
<button>Calculate</button>

Независимо от того, какой подход вы выберете, помните основной принцип: если я получаю какую-то ценность X , я хочу получить какую-то ценность Y . Это всего лишь примеры того, как отобразить эту идею.

Ответ №2:

Существует также карта JavaScript, которая будет обрабатывать все ассоциации за вас.

Ссылка на MDN JavaScript: Карта

 var vals = new Map();
vals.set("A", 4.0);
vals.set("B", 3.0);
vals.set("C", 2.0);
vals.set("D", 1.0);
vals.set("F", 0.0);

И для извлечения:

 var grade = document.getElementById("myGrade");
var gradeVal = vals.get(grade);

Конечно, вы бы выполняли поиск в цикле, получая значения для всех оценок, введенных пользователем, и вычисляя среднее значение. Это всего лишь простой пример использования Карты.

Ответ №3:

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

Внутри функции вы можете изменить буквы на цифры.

JavaScript

 const calculateGrade = () => {
  const grades = [inputOne, inputTwo, inputThree, inputFour]
  let sum = 0
  for (let i = 0; i < grades.length; i  ) {
    switch (grades[i]) {
      case "A":
        sum  = 4.0
      case "B":
        sum  = 3.0
      case "C":
        sum  = 2.0
      case "D":
        sum  = 1.0
    }
  }
  return (sum / 4)
}

Ответ №4:

Я прочитал все ответы, и все они дали мне разные идеи о том, что делать, но, в конце концов, я в основном следовал тому, что делал Майк К., но не совсем так. Вот что у меня получилось в итоге, и это сработало идеально.

 var gradeValues = {
    "A": 4.0,
    "B": 3.0,
    "C": 2.0,
    "D": 1.0,
    "F": 0
};
var getGrade = function() {
    input1 = document.form.input1.value;
    input2 = document.form.input2.value;
    input3 = document.form.input3.value;
    input4 = document.form.input4.value;
    document.getElementById("result").innerHTML = ((gradeValues[input1]   gradeValues[input2]   gradeValues[input3]   gradeValues[input4]) / 4)   " is your GPA";
};