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

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

(Это мой 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; 
}

источник

2016-10-06 user6901580

Как насчет создания функции с переключателем/корпусом внутри, который отображает каждую букву в числовое значение? Вы слышали о заявлении о переключении раньше? – Serlite

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

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

Простейшим возможным способом сделать это будет серия заявлений 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. Это всего лишь примеры того, как отобразить эту идею.

источник

2016-10-06 22:24:52

Я принял участие в том, что вы написали на своем последнем коде, и внедрил его в мой, и теперь он отлично работает! – user6901580

Я бы создал другую функцию 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) 
}

источник

2016-10-06 22:36:31

Там также JavaScript Карта, которая будет обрабатывать все ассоциации для вас.

MDN JavaScript Reference: Map

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);

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

источник

2016-10-07 01:04:35

Если вам нужно поддерживать старые версии браузера, вы можете пойти со старым объектом JavaScript. – Blue

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

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"; 
};

источник

2016-10-11 03:14:16 user6901580

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

ответ

Смежные вопросы