JS设置input的value值|极客笔记

JS设置input的value值

在前端开发中，经常会遇到需要动态设置input元素的value值的情况。这种操作通常会出现在表单的初始化、数据回显、用户输入验证等场景中。本文将详细介绍如何使用JavaScript来设置input元素的value值，并给出相关的示例代码。

使用setAttribute方法

在JavaScript中，我们可以使用setAttribute方法来设置input元素的value值。首先，我们需要获取到需要设置value值的input元素，然后调用setAttribute方法。下面是一个简单的示例代码：

// 获取input元素
var inputElement = document.getElementById("inputId");

// 设置input的value值
inputElement.setAttribute("value", "新的值");

在上述代码中，我们首先通过getElementById方法获取到id为”inputId”的input元素，然后使用setAttribute方法设置该input元素的value值为”新的值”。

使用直接修改value属性

除了使用setAttribute方法，我们还可以直接修改input元素的value属性来设置其值。这种方法更加简洁和直观，如下所示：

// 获取input元素
var inputElement = document.getElementById("inputId");

// 设置input的value值
inputElement.value = "新的值";

上述代码与之前的方法功能相同，只是使用了更加简洁的语法来设置input元素的value值。

示例代码

为了更好地演示如何使用JavaScript来设置input元素的value值，我们来看一个完整的示例代码。假设我们有一个包含一个input元素和一个按钮的HTML页面，当点击按钮时，我们将input元素的value值设置为”Hello World”。以下是完整的示例代码：

<!DOCTYPE html>
<html lang="en">
<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>Set Input Value</title>
</head>
<body>
  <input type="text" id="inputId" value="">
  <button onclick="setValue()">Set Value</button>

  <script>
    function setValue() {
      var inputElement = document.getElementById("inputId");
      inputElement.value = "Hello World";
    }
  </script>
</body>
</html>

在上述示例代码中，我们首先定义了一个包含一个input元素和一个按钮的HTML页面。当点击按钮时，触发了名为setValue的JavaScript函数，该函数获取到id为”inputId”的input元素，并将其value值设置为”Hello World”。