Question

我正试图从html输入中获取值，而我无法使其工作，从我正在研究自己的研究，看起来我有正确的语法？所以我很困惑。

当我控制台记录该值时，看起来它实际上并没有得到输入的值。

let btn = document.getElementById("btn");
let grade = document.getElementById("gradeNum").value;

function getGrade() {
    console.log(grade);

    if (grade >= 90) {
        document.getElementById("gradeLetter").innerHTML = "You got an A!";
    } else if (grade < 90 && grade >= 80) {
        document.getElementById("gradeLetter").innerHTML = "You got a B!";
    } else if (grade < 80 && grade >= 70) {
        document.getElementById("gradeLetter").innerHTML = "You got a C!";
    } else if (grade < 70) {
        document.getElementById("gradeLetter").innerHTML = "You got an F! Study more!";
    }
};

Answer 1

试试这个：

let btn = document.getElementById("btn");
// let grade = document.getElementById("gradeNum").value; <-- NOT HERE

function getGrade() {
  let grade = document.getElementById("gradeNum").value;   // BUT HERE
  console.log(grade);

  if (grade >= 90) {
    ...

Answer 2

一些事情：

（1）如果您正在使用打字稿，则HTMLElement（document.getElementById返回的内容）不具有value属性。
为此，您需要转发HTMLInputElement {/ 3>} has it。

let grade = (document.getElementById("gradeNum") as HTMLInputElement).value;

（2）此输入元素的value类型是一个字符串，因此grade也是一个字符串，但您将其视为一个数字。
虽然"5" == 5为真，但"5" === 5为false，因此您可能需要获取数字值：

let grade = parseInt((document.getElementById("gradeNum") as HTMLInputElement).value);

（3）您将grade的值设置为全局变量，但它似乎不会在以后重新分配。
也就是说，当页面加载时，您将为其分配一个空字符串（因为用户没有在输入框中输入值），然后在调用getGrade函数时，您不要＆＃ 39; t检查当前值是什么。

应该是：

let grade: number;

function getGrade() {
    grade = parseInt((document.getElementById("gradeNum") as HTMLInputElement).value);

    console.log(grade);
    ...
}

Answer 3

问题在于：

grade = document.getElementById("gradeNum").value;

这是在第二行，并在用户输入输入之前进行整体评估。

取而代之的是：

grade = document.getElementById("gradeNum");

后来提到这样的成绩：

if (grade.value >= 90)

从html输入中获取值

3 个答案: