GPA電卓、文字入力を数字にする方法

私は簡単なGPA電卓を作ろうとしています。 4つのフォームがあり、ユーザーが4つの文字（A、B、C、D、またはF）を入力し、その数字のそれぞれを値（A = 4.0、B = 3.0など）にするようにしています。そして、基本的にはそれらの平均をすべて取得します。今、私はちょうどそれを作ったので、ユーザーが数字を入力すると機能しますが、ユーザーが文字の等級を入力して同じ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

各文字を数値にマッピングするスイッチ/ケースを内蔵した関数を作成する方法はありますか？前にswitch文を聞いたことがありますか？ – 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" />

が、これは、あなたが複数の入力を持っている場合は特に、非常に退屈な取得します。もう1つのオプションは、この機能を機能に移動し、その機能を複数回使用することです。

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

私はすべての答えを読んでいましたが、私は何をすべきかについてさまざまなアイデアを出しましたが、結局マイクC.が行ったことにほとんど倣っていますが、全く同じではありません。ここで私は完璧に働いたのです。

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電卓、文字入力を数字にする方法

答えて

関連する問題