开发者问题收集

在 javascript 中访问没有 id 的表单元素

2022-05-11
65
javascript html

我有一项网络安全课程的作业，我需要提交一个包含特定输入值的表单。

这是我正在使用的源代码的相关片段：（消息系统的源代码） 

 <div class="form-group">
    <label for="inputSubject">Subject:</label>
    <input name="subject" type="text" class="form-control" id="inputSubject" placeholder="Enter a subject" pattern=".{5,}" required>
</div>
<div class="form-group">
    <textarea name="contents" class="form-control" rows="10" placeholder="Enter your message" pattern=".{5,}" required></textarea>
</div>

每当我尝试使用 getElementsbyName 或 getElemetnsbyTagName 设置文本区域的值时，我都会收到错误“Uncaught TypeError：无法设置 null 属性。有什么想法如何修复此问题吗？

3个回答

两件事：

  1. 确保您正确引用了元素
  2. 使用 value 或 textContent 设置。 
const textArea = document.querySelector('textarea[name="contents"]');
textArea.textContent = `whatever you want it to say`.
Matt Rose
2022-05-11

使用 <script defer src="script.js"></script> 这种方式在 html 中导入脚本，以便创建 DOM 树。在导入的脚本中，您可以执行以下操作： document.getElementsByTagName("textarea")[0].value = "Test Value";

Minas-Theodoros Charakopoulos
2022-05-11

作为 getElementsByName 返回一个节点列表，并且只有一个具有该名称的元素：

这应该适合您： 

document.getElementsByName("contents")[0].value = "hello world"

这里是您可以如何实现的： 

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="form-group">
        <label for="inputSubject">Subject:</label>
        <input name="subject" type="text" class="form-control" id="inputSubject" placeholder="Enter a subject"
            pattern=".{5,}" required>
    </div>
    <div class="form-group">
        <textarea name="contents" class="form-control" rows="10" placeholder="Enter your message" pattern=".{5,}"
            required></textarea>
    </div>

    <script>
        document.getElementsByName('contents')[0].value = 'hello world'
    </script>
</body>

</html>
Martinez
2022-05-11