document.getElementById 外部元素 html

Question

我有这个html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Notas</title>

    <script type="text/javascript" src="notas.js"></script>

</head>
<body>

    <p>Nombre alumno: </p>
    <input type="text" name="nombre" id="nombre">
    <p>Nota alumno:</p>
    <input type="text" name="nota">

    <p><br></p>
    <input type="button" name="boton" value="Enviar" onclick="respuesta()">

</body>
</html>

而这个 Javascript 在另一个文件中：

function respuesta(){

    nombrej=document.getElementById("nombre");
    document.write(nombrej);
}

问题是当我点击按钮时，消息是 "null" 我在论坛上看到了类似问题的解决方案，但我不知道该怎么做，因为有一个按钮。求助！

Answer 1

那里有几个问题：

您还没有申报nombrej。 （不应该是 nombre 吗？） 这意味着您的代码正在成为 The Horror of Implict Globals （那是 post在我的博客上）。声明你的变量。
您已将 nombrej 设置为 HTMLInputElement。您可能想要它的值，它位于 value 属性.
页面完成后调用 document.write 将隐式调用 document.open，这将清除页面并用您编写的内容替换它。

所以 respuesta 可能看起来像这样：

function respuesta(){

    var nombrej=document.getElementById("nombre").value;
//  ^^^--- #1                                    ^^^^^^--- #2
    console.log(nombrej);
//  ^^^^^^^^^^^--- #3
}

旁注：我看到您已将 script 标签放在 head 部分。您会发现很多人这样做并告诉您这样做，但这是一种反模式。除非您有特殊原因要做其他事情，否则请将 script 标签放在 body 的最后，就在结束 </body> 标签之前。更多内容在 YUI's guidelines.

Answer 2

JavaScript getElementById returns DOM 元素。要获取该文本输入的值，您需要获取它的值。

而不是：名字=document.getElementById("nombre");

使用：名称=document.getElementById("nombre").value;

示例：JavaScript: how to get value of text input field?

document.getElementById 外部元素 html

document.getElementById for an element in external html

html

javascript

onclick

getelementbyid