Javascript：获取、设置表单元素的值

听海边涛声

已于 2024-06-20 09:27:05 修改

阅读量471

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2024-06-20 08:52:46 首次发布

本文链接：https://blog.youkuaiyun.com/panghuangang/article/details/139818750

版权

Javascript获取、设置表单元素的值用的是 表单.value，而不是 表单.innerHTML。innerHTML得不到表单的内容。

示例：获取表单元素的值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" value="电脑">
  <script>
    // 1. 获取元素
    const uname = document.querySelector('input')
    // 2. 获取值 获取表单里面的值用的是 表单.value
    console.log(uname.value)
  </script>
</body>

</html>

控制台输出：
在这里插入图片描述

设置表单元素的值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" value="电脑">
  <script>
    // 1. 获取元素
    const uname = document.querySelector('input')
    // 设置表单的值
    uname.value = '我要买电脑'
  </script>
</body>

</html>