JavaScript成绩输入排版优化、及格判断实现及练习需求问询

嘿，我来帮你搞定这些问题！先一步步解决你的代码问题，再给你推荐几个实用的练习题～

一、代码修改与功能实现 #

1. 让三门成绩换行显示 #

原代码直接用document.write()输出成绩会挤在一起，你页面里已经有demo、demo2、demo3这三个<p>标签，刚好可以把每门成绩放到对应的标签里，这样自然就实现换行啦。当然也可以在document.write()里加<br>标签换行，但用DOM元素插入更规范。

2. 计算平均分并添加及格判断 #

你的xxx函数目前有两个小问题：一是调用时没传参数，二是缺少及格判断的逻辑。我帮你调整了代码结构，把成绩存在全局变量里，然后在函数里完成计算和判断，最终把结果显示到指定标签中。

下面是修改后的完整代码：

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<button onclick="calculateAverage()">calculate</button>
<p id="demo4"></p>
<p id="demo5"></p>

<script>
// 先获取三门成绩并显示到页面
var p = prompt("enter first grade");
var c = prompt("enter second grade");
var o = prompt("enter third grade");

// 将成绩分别放到对应的p标签，实现换行显示
document.getElementById("demo").innerHTML = "第一门成绩：" + p;
document.getElementById("demo2").innerHTML = "第二门成绩：" + c;
document.getElementById("demo3").innerHTML = "第三门成绩：" + o;

function calculateAverage() {
    // 把字符串转成数字，避免出现字符串拼接错误
    var grade1 = parseInt(p);
    var grade2 = parseInt(c);
    var grade3 = parseInt(o);
    
    // 计算平均分，保留两位小数更友好
    var average = (grade1 + grade2 + grade3) / 3;
    document.getElementById("demo4").innerHTML = "平均分：" + average.toFixed(2);
    
    // 用if-else判断及格状态并显示
    if (average >= 60) {
        document.getElementById("demo5").innerHTML = "*成绩状态：及格";
    } else {
        document.getElementById("demo5").innerHTML = "*成绩状态：不及格";
    }
}
</script>
</body>
</html>

我给你做了这些优化：

• 把函数名改成了更直观的calculateAverage，方便后续维护
• 将成绩分别插入到独立的<p>标签，实现自然换行
• 在函数内完成平均分计算和及格判断，结果分别显示到对应标签
• 用toFixed(2)让平均分保留两位小数，显示更美观

二、用户输入与函数相关的练习题 #

这里给你准备了几个针对性的练习题，帮你巩固相关知识点：

• 编写一个函数，接收用户输入的两个整数，计算它们的和与差，同时判断和是否大于差，并把所有结果显示在页面上。
• 制作一个简单的温度转换器：让用户输入摄氏温度，编写函数将其转换为华氏温度（公式：华氏度 = 摄氏度 × 1.8 + 32），并判断转换后的温度是否高于86°F（30°C），给出对应的提示。
• 编写一个函数，让用户输入一个用户名和密码，判断密码长度是否大于等于8位，且包含至少一个数字，显示验证结果。
• 制作一个数字奇偶判断器：让用户输入一个整数，函数判断它是奇数还是偶数，同时判断这个数是否能被3整除，显示对应的结论。
• 编写一个函数，接收用户输入的三个字符串，找出最长的那个字符串，并判断最长字符串的长度是否超过10个字符。

内容的提问来源于stack exchange，提问作者shindoggy