您的位置:

JS获取文本框的值详解

JS是一种脚本语言,广泛应用于浏览器端,可以驱动HTML和CSS来实现动态效果,其中获取文本框的值是开发中经常会用到的一种操作。本文将就JS获取文本框的值的相关内容,进行多方面的阐述。

一、改变文本框的值

JS可以通过id、class、标签名等获取到DOM节点,从而对节点进行修改。下面是修改文本框的值的代码示例:
let input = document.getElementById('input');
input.value = 'new value';
以上代码首先通过id获取到了一个文本框的节点对象,然后更改了它的value属性,这样就可以改变文本框的值。

二、获取id为1的文本框的值

在HTML中,每个元素都可以拥有一个唯一的id属性,我们可以通过这个属性来获取相应的文本框的值。以下是获取id为1的文本框的值的代码示例:
let input1 = document.getElementById('input1');
let value = input1.value;
alert(value);
以上代码通过getElementById方法获取到了id为input1的文本框节点对象,然后通过它的value属性获取到了该文本框的值,最后通过alert方法输出了该值。

三、获取文本框的值语句

获取文本框的值的语句非常简单,只需要获取到文本框的节点对象,然后通过其value属性获取即可。以下是获取文本框的值语句的代码示例:
let input = document.getElementById('input');
let value = input.value;
以上代码中,首先通过getElementById方法获取到了id为input的文本框节点对象,然后通过其value属性获取到了该文本框的值,最后将该值赋给value变量。

四、获取文本框的值并显示

JS不仅可以获取文本框的值,还可以将其显示出来。以下是获取文本框的值并显示的代码示例:
let input = document.getElementById('input');
let value = input.value;
let div = document.getElementById('display');
div.innerText = value;
以上代码通过getElementById方法获取到了id为input的文本框节点对象,并获取了该文本框的值。然后通过getElementById方法获取到了id为display的div节点对象,使用其innerText属性将文本框的值显示在该div中。

五、获取文本框的值进行计算

JS除了可以获取文本框的值和将其显示出来之外,还可以对其进行计算。以下是获取文本框的值进行计算的代码示例:
let input1 = document.getElementById('input1');
let input2 = document.getElementById('input2');
let value1 = parseInt(input1.value);
let value2 = parseInt(input2.value);
let result = value1 + value2;
alert(result);
以上代码中,首先通过getElementById方法分别获取到了id为input1和input2的文本框节点对象,并通过其value属性获取了这两个文本框的值。然后将这两个值都转化为数字类型,然后将它们相加,并将结果弹出。

六、获取文本框的值进行加减乘除

JS除了可以对文本框的值进行加法操作之外,还可以进行减、乘、除操作。以下是获取文本框的值进行加减乘除的代码示例:
let input1 = document.getElementById('input1');
let input2 = document.getElementById('input2');
let value1 = parseInt(input1.value);
let value2 = parseInt(input2.value);
let add = value1 + value2;
let sub = value1 - value2;
let mul = value1 * value2;
let div = value1 / value2;
以上代码通过getElementById方法分别获取到了id为input1和input2的文本框节点对象,并获取了这两个文本框的值。然后将这两个值都转化为数字类型,分别进行加、减、乘、除运算,并将结果赋给相应的变量。

七、获取文本框的值四种方法

获取文本框的值有多种方法,以下将介绍四种常用的方法。 方法一:通过id获取文本框节点对象,再获取其value值
let input = document.getElementById('input');
let value = input.value;
方法二:通过name属性获取文本框数组,在通过下标获取相应的value值 HTML代码如下:
<input type="text" name="inputs[]" value="1">
<input type="text" name="inputs[]" value="2">
<input type="text" name="inputs[]" value="3">
<input type="text" name="inputs[]" value="4">
JS代码如下:
let inputs = document.getElementsByName('inputs[]');
let value1 = inputs[0].value;
let value2 = inputs[1].value;
let value3 = inputs[2].value;
let value4 = inputs[3].value;
方法三:通过class获取文本框节点对象和value值 HTML代码如下:
<input type="text" id="input1" class="input" value="1">
<input type="text" id="input2" class="input" value="2">
<input type="text" id="input3" class="input" value="3">
<input type="text" id="input4" class="input" value="4">
JS代码如下:
let inputs = document.getElementsByClassName('input');
let value1 = inputs[0].value;
let value2 = inputs[1].value;
let value3 = inputs[2].value;
let value4 = inputs[3].value;
方法四:通过标签名获取文本框节点对象和value值 HTML代码如下:
<input type="text" name="input1" value="1">
<input type="text" name="input2" value="2">
<input type="text" name="input3" value="3">
<input type="text" name="input4" value="4">
JS代码如下:
let inputs = document.getElementsByTagName('input');
let value1 = inputs[0].value;
let value2 = inputs[1].value;
let value3 = inputs[2].value;
let value4 = inputs[3].value;

八、获取节点的文本值

JS不仅可以获取文本框的值,还可以获取节点的文本值,节点的文本值即元素节点中的文本内容,可以通过innerText属性来获取。以下是获取节点的文本值的代码示例: HTML代码如下:
<div id="text">hello world</div>
JS代码如下:
let div = document.getElementById('text');
let text = div.innerText;
alert(text);
以上代码通过getElementById方法获取到了id为text的div节点对象,然后通过其innerText属性获取了该div中的文本内容,最后弹出该内容。

九、获取文本框输入的值

除了可以获取文本框的value属性值之外,JS还可以获取文本框的原始值,即用户在输入框中输入的内容,在有些场景下,这种方式更为实用。以下是获取文本框输入的值的代码示例: HTML代码如下:
<input type="text" id="input" oninput="showValue()">
JS代码如下:
function showValue() {
  let input = document.getElementById('input');
  let value = input.value;
  alert(value);
}
以上代码中,通过为文本框添加oninput事件,可以在用户每次输入完成后即时获取输入的内容,这样就可以获取文本框输入的值。

小结

本文详细阐述了JS获取文本框的值的相关内容,从获取文本框的值并显示、获取文本框的值进行计算、获取文本框的值四种方法、获取节点的文本值以及获取文本框输入的值等多个方面进行了说明,并提供了相应的代码示例,希望能对开发者们有所帮助。
JS获取文本框的值详解

2023-05-19
重学java笔记,java笔记总结

2022-11-23
java学习笔记(java初学笔记)

2022-11-14
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
js高级程序设计笔记14(js高级程序设计笔记14页)

本文目录一览: 1、JavaScript高级程序设计 该怎么看 2、JavaScript学习笔记之数组基本操作示例 3、JS中有关sort以及return的问题 JavaScript高级程序设计 该怎

2023-12-08
js获取上传文件的完整路径(js获取文件绝对路径)

本文目录一览: 1、java或js(可用jquery)如何获取上传文件原始路径名? 2、javascript 中怎样获取file里的完整路径,如:D:\E\1.jpg 3、jsp页面如何用js获取上传

2023-12-08
发篇java复习笔记(java课程笔记)

2022-11-09
java基础知识学习笔记一,Java基础笔记

2022-11-21
java笔记,尚硅谷java笔记

2022-12-01
java方法整理笔记(java总结)

2022-11-08
怎么抽取网页整理,怎么抽取网页整理数据

2023-01-08
css设置的js对话框(js 选择文件对话框)

本文目录一览: 1、怎样用 CSS + JS 美化网页中的 select 下拉框 2、笔记:JS设置CSS样式的几种方式 3、怎么用div+css和js制作回复窗口 4、如何用JS点击超链接弹出对话框

2023-12-08
java笔记,大学java笔记

2022-11-28
Mac笔记:在日常生活中高效实用的笔记工具

2023-05-18
js获取css信息(js如何获取css样式的值)

本文目录一览: 1、js 怎么获取 css ?在线等待! 谢谢! 2、解析js如何获取css样式 3、如何javascript获取css中的样式 4、JS使用getComputedStyle()方法获

2023-12-08
关于java获取eth余额的信息

2022-11-18
javascript简要笔记,JavaScript读书笔记

2022-11-17
达内web前端js笔记(达内jsd)

本文目录一览: 1、web前端里的js技术 2、《web前端笔记7》js字符—获取、查找、遍历、提取、替换方法总结 3、达内web前端开发讲的什么内容 4、2020年自学Web前端要掌握的知识点有哪些

2023-12-08
印象笔记记录java学习(Java成长笔记)

2022-11-12
python基础学习整理笔记,Python课堂笔记

2022-11-21