简单的评分系统

时间:2014-10-12 02:24:56

标签: javascript textbox

我的朋友让我帮助他完成他的项目,但由于我是初学者,我不知道该怎么做,所以我到这里寻求帮助。

好的,所以这个项目是一个简单的评分系统(“他说的更像一个形式”)。它由四个科目(数学,英语,历史和西班牙语)组成,然后将其平均为数字分数。它不需要是字母等级。它只需要表明你是否通过了所有加上平均值本身的故障。我正在考虑使用文本框,因为他说它需要一些,但我不知道在哪里放它。

 <html>
    <head>
    <title> Prog </title>
    </head>
    <body>

    <script>
    var d
    var e
    var f
    var g
    var ave 
    var h

    d=prompt("Math grade",0)
    e=prompt("English grade",0)
    f=prompt ("History grade", 0)
    g=prompt("Spanish grade",0)
    ave=(parseFloat(d)+ parseFloat(e) + parseFloat(f) + parseFloat(g))/4

    if (ave>=75)
{
    h="You passed!"
}
    if (ave<=74)
{
    h="You failed!"
}
    </script>
    </body>
    </html>

现在我的问题是如何放置文本框并在那里输入数据而不是使用提示符?如何为Average创建按钮?我如何使用文本区域显示结果?

注意:这是记事本中使用的javascript,因此这就是我朋友告诉我的内容。我告诉他使用jquery,但他说它需要记事本,因为他会发送一个文本版本而另一个是输出本身。

谢谢:)

1 个答案:

答案 0 :(得分:1)

试试这个:

Fiddle

上的演示

HTML:

<body>
  Math grade: <input type="text" id="math"/><br>
  English grade: <input type="text" id="english"/><br>
  History grade: <input type="text" id="history"/><br>
  Spanish grade: <input type="text" id="spanish"/><br>
  <button>Show Result</button>
  <div id="result"></div>
</body>

的JavaScript:

var button = document.getElementsByTagName('button');
button[0].onclick = calc;

function calc() {

    var d = document.getElementById('math').value;
    var e = document.getElementById('english').value;
    var f = document.getElementById('history').value;
    var g = document.getElementById('spanish').value;
    var avg = (parseFloat(d) + parseFloat(e) + parseFloat(f) + parseFloat(g)) / 4;
    var h;

    if (avg >= 75) {
        h = "Passed!";
    }
    if (avg <= 74) {
        h = "Failed!";
    }
    if (d && e && f && g) {
        document.getElementById('result').innerHTML = "The average is " + avg + " which means you have " + h;
    } else {
        document.getElementById('result').innerHTML = "Please fill all inputs first."
    }
}