[js] 获取标签对象的数据 input select textarea .value

最新推荐文章于 2023-06-01 09:30:59 发布

533_

最新推荐文章于 2023-06-01 09:30:59 发布

阅读量330

点赞数

分类专栏： # js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_14993591/article/details/120209067

版权

js 专栏收录该内容

158 篇文章 2 订阅

订阅专栏

input , select>option， textarea可以存储数据
获取
var 变量 = 标签对象.value;
特别注意: 获取的数据结果都是字符串类型
如果需要计算要转化为数值类型
设定
标签对象.value = 数值 ;

<input type="text" value="123">

var oIpt = document.querySelector('input');
console.log( oIpt.value );

123

    <input type="text"><br>

    <select>
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">重庆</option>
        <option value="4">天津</option>
    </select><br>

    <textarea cols="30" rows="10"></textarea><br>
    <button name="get">获取</button>
    <button name="set">设定</button>

		// 获取的标签对象
        var oIpt = document.querySelector('input');
        var oSel = document.querySelector('select');
        var oArea = document.querySelector('textarea');

        // 直接 获取数据 获取的数据 是 初始状态下的数据
        var res = oIpt.value;
        console.log( oIpt.value );
		
		// 获取
        var oBtnGet = document.querySelector('[name="get"]');
        oBtnGet.addEventListener('click', function () {
            console.log(oIpt.value)
            console.log(oSel.value)
            console.log(oArea.value)
        })
		
		//设定
        var oBtnSet = document.querySelector('[name="set"]');
        oBtnSet.addEventListener('click',function(){
            oIpt.value = 'jack'
            oSel.value = 4
            oArea.value = '留言内容'
        })