给大家整理了一些有关【Java,HTML】的项目学习资料（附讲解～～）：

 https://edu.51cto.com/course/35714.html

 https://edu.51cto.com/course/32916.html

JavaScript 取文本控件的值

在网页开发中，JavaScript 是一种非常强大的语言，它允许我们与 HTML 元素进行交互，获取它们的值，甚至修改它们。在本文中，我们将探讨如何使用 JavaScript 来获取文本控件（如 <input> 和 <textarea>）的值。

什么是文本控件？

在 HTML 中，<input> 和 <textarea> 是两种常见的文本控件。<input> 通常用于输入较短的文本，如用户名、密码等。而 <textarea> 则用于输入较长的文本，如评论或消息。

如何获取文本控件的值？

要获取文本控件的值，我们可以使用 JavaScript 的 value 属性。以下是一些示例代码：

// 获取 input 控件的值
var inputElement = document.getElementById("myInput");
var inputValue = inputElement.value;

// 获取 textarea 控件的值
var textareaElement = document.getElementById("myTextarea");
var textareaValue = textareaElement.value;
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

在上面的代码中，我们首先使用 document.getElementById() 方法获取控件的引用，然后通过 value 属性获取其值。

代码示例

假设我们有一个 HTML 页面，其中包含一个 <input> 控件和一个 <textarea> 控件：

<!DOCTYPE html>
<html>
<head>
  <title>获取文本控件的值</title>
</head>
<body>
  <input type="text" id="myInput" placeholder="输入文本">
  <textarea id="myTextarea" placeholder="输入更长的文本"></textarea>
  <button onclick="getValues()">获取值</button>

  <script>
    function getValues() {
      var inputElement = document.getElementById("myInput");
      var textareaElement = document.getElementById("myTextarea");
      var inputValue = inputElement.value;
      var textareaValue = textareaElement.value;

      console.log("Input Value: " + inputValue);
      console.log("Textarea Value: " + textareaValue);
    }
  </script>
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.

在这个示例中，我们定义了一个按钮，当点击按钮时，会调用 getValues() 函数。该函数获取 <input> 和 <textarea> 控件的值，并将它们输出到控制台。

饼状图

为了更直观地展示文本控件的类型，我们可以使用 Mermaid 语法来创建一个饼状图：

40% 60% input textarea

结论

通过本文，我们了解到如何使用 JavaScript 获取文本控件的值。这在开发动态网页时非常有用，因为它允许我们根据用户输入来做出响应。希望本文能帮助你更好地理解 JavaScript 在网页开发中的应用。