如何修复有关 getelementbyid [Javascript] 的代码？答案

【问题标题】：How do I fix this code regarding getelementbyid [Javascript]?如何修复有关 getelementbyid [Javascript] 的代码？
【发布时间】：2020-02-05 01:19:21
【问题描述】：

所以我目前正在学习编码课程，并且对编码不是很精通。我在使用 getelementbyid 块时遇到问题，该块没有为分配编写循环数组。谁能帮帮我？

代码如下：

<html>

<head>
  <title>
    Looping Assignment
  </title>
</head>

<body>
  <h1 align=center>Name and Grades</h1>
  <p id="message"> Name </p>
  <p id="message2"> Grade </p>

  <script>
    var input = []
    var message = " "
    var message2 = " "

    var n = 0
    var i = 1
    var names = n
    var grade = i
    for (n = 0; n < 1; n++) {
      var names = n + 1
      input[n] = window.prompt("Enter First Name" + names)
      message += "Your name is " + input[n] + "<br>"
    }

    for (i = 1; i < 5; i++) {
      input[i] = window.prompt("Enter Grade (numerical value)" + grade)
      message2 += "Grade " + i + " is " + input[i] + "<br>"
    }

    document.getElementById(message).innerHTML = "your name is " + input[n] + "<br>"
    document.getElementById(message2).innerHTML = "Grade" + i + " is " + input[i] + "<br"
  </script>
</body>

</html>

【问题讨论】：

这在很多方面都是无效的。你需要关闭你的 for 循环，你的选择器必须是字符串，a.e. document.getElementById("message") 不是 document.getElementById(message)
@SlavicMilk 你能解释一下程序的预期输入和输出，以便我可以为你提供更好的解决方案
我不确定你关闭for循环是什么意思，当我看到他们的sn-p时我也是这么想的，但是关闭的}在同一行而不是下一行。（不正确的缩进）
stackoverflow.com/q/15696292/8376184 的副本
@David 你说得对，我在开始写答案后就看到了。我看的时候错过了，但我认为缺乏格式让我耸耸肩。

标签： javascript

【解决方案1】：

您的变量和您的 id-s 具有相同的名称。通过执行getElementbyId(message)，您将传递变量的值，而不是传递给元素的固定 id。

您需要将 id-s 放在引号中，如下所示：

document.getElementById("message")
document.getElementById("message2")

【讨论】：

【解决方案2】：

经过我的测试，这是有效的代码

<!DOCTYPE html>
<html>

<head>
    <title>
        Looping Assignment
    </title>
</head>

<body>
    <h1 align=center>Name and Grades</h1>
    <p id="message"> Name </p>
    <p id="message2"> Grade </p>

    <script>
        var input = []

        var message = " "
        var message2 = " "

        var n = 0
        var i = 1
        var names = n
        var grade = i
        for (n = 0; n < 1; n++) {
            var names = n + 1
            input[n] = window.prompt("Enter First Name" + names)
            message += "Your name is " + input[n] + "<br>"
        }

        for (i = 1; i < 5; i++) {
            input[i] = window.prompt("Enter Grade (numerical value)" + grade)
            message2 += "Grade " + i + " is " + input[i] + "<br>"
        }

        document.getElementById('message').innerHTML = "your name is " + input[n] + "<br>"
        document.getElementById('message2').innerHTML = "Grade" + i + " is " + input[i] + "<br"


    </script>
</body>

</html>

错误：- getElementbyId 的 id 必须用引号引起来

【讨论】：

【解决方案3】：

确保您的选择器是字符串
- document.getElementById("message"); 不是 document.getElementById(message);
确保以分号结束代码行。这不是可选的，即使代码将尝试在没有它们的情况下运行。
更改输出以呈现累积的数据 - 现在每次循环时都会覆盖输出。

注意：我不知道您对 prompt 方法（names 和 grade）内部的数值做了什么，所以我没有碰它。

示例：

<!DOCTYPE html>
<html>

<head>
  <title>
    Looping Assignment
  </title>
</head>

<body>
  <h1 align=center>Name and Grades</h1>
  <p id="message"> Name </p>
  <p id="message2"> Grade </p>

  <script>
    var input = [];

    var message = " ";
    var message2 = " ";

    var n = 0;
    var i = 1;
    var names = n;
    var grade = i;
    for (n = 0; n < 1; n++) {
      var names = n + 1
      input[n] = window.prompt("Enter First Name " + names)
      message += "Your name is " + input[n] + "<br>";
    }

    for (i = 1; i < 5; i++) {
      input[i] = window.prompt("Enter Grade (numerical value) " + grade)
      message2 += "Grade " + i + " is " + input[i] + "<br>";
    }

    document.getElementById("message").innerHTML = message + "<br>";
    document.getElementById("message2").innerHTML = message2 + "<br>";
    </script>

【讨论】：

【解决方案4】：

@SlavicMilk

以下内容足以完成您的作业：

HTML (index.html)：

<h1 style="text-align: center">Name and Grades</h1>
<table>
  <thead>
    <th>Name</th>
    <th>Grade</th>
  </thead>
  <tbody id="data">
  </tbody>
</table>
<script src="script.js"></script>

JS（脚本.js）：

let student = []

for (let i = 0; i < 5; i++) {
  student[i] = {
    "name": window.prompt(`Enter Name ${i + 1}`),
    "grade": window.prompt(`Enter Grade (numerical value) ${i + 1}`)
  }
}

document.getElementById('data').innerHTML = student.map(student => {
  return `<tr><td>${student.name}</td><td>${student.grade}</td></tr>`
})

【讨论】：

谢谢。为了跟进您的评论，有人告诉我将一个人的名字和等级写在一个应该循环的数组中。最后我为了休息休息了一段时间，当我回来时，我不知道我在看什么。我真的需要开始写代码cmets了。
@SlavicMilk 我已根据您的要求编辑了我的答案：“应该循环的数组中一个人的名字和等级”