当前位置：首页 > 行业动态 > 正文

html把值传给js

admin
行业动态
2025-05-02
5

HTML向JS传值可通过：1.表单元素value属性；2.事件监听器(如onclick/onchange)捕获输入值；3.JS DOM方法(getElementById等)直接读取元素内容；4.自定义data-

HTML向JavaScript传值的常见方法

通过表单元素获取值

元素类型	获取方式	示例代码
文本框	`document.getElementById().value`	`html <input id="name" /> <script>let n = document.getElementById('name').value;</script>`
文本区域	`.value`	`textarea id="msg"></textarea> <script>alert(document.getElementById('msg').value)</script>`
单选框	`.checked` + `value`属性	`input type="radio" name="gender" value="male" /><script>if(document.querySelector('[name="gender"]:checked')) { alert(...) }</script>`
复选框	`.checked`数组/集合	`input type="checkbox" id="agree" /><script>let checked = document.getElementById('agree').checked</script>`
下拉选择框	`.value`或`.selectedIndex`	`select id="country">...</select><script>alert(document.getElementById('country').value)</script>`

通过URL参数传递值

<a href="page.html?id=123">跳转链接</a>
<script>
  // 方法1：URLSearchParams（现代浏览器）
  let params = new URLSearchParams(window.location.search);
  alert(params.get('id')); // 输出123
  // 方法2：手动解析
  let urlParams = window.location.search.substring(1).split('&');
  let paramsObj = {};
  urlParams.forEach(param => {
    let [key, value] = param.split('=');
    paramsObj[key] = value;
  });
</script>

通过自定义数据属性传值

<div id="user" data-name="张三" data-age="25"></div>
<script>
  const userDiv = document.getElementById('user');
  console.log(userDiv.dataset.name); // 张三
  console.log(userDiv.dataset.age);  // 25
</script>

通过事件对象传递值

<button id="btn" onclick="showValue(event)">点击传值</button>
<script>
  function showValue(e) {
    console.log(e.target.innerText); // 输出按钮文本内容
    console.log(e.target.id);        // 输出btn
  }
</script>

直接调用JavaScript函数传参

<input id="num1" type="number" />
<input id="num2" type="number" />
<button onclick="calculate(+document.getElementById('num1').value, +document.getElementById('num2').value)">计算</button>
<script>
  function calculate(a, b) {
    alert(a + b);
  }
</script>

注意事项

类型转换：HTML获取的值默认都是字符串类型，需要进行类型转换（如parseInt()、parseFloat()）
空值处理：使用操作符设置默认值，例如let age = document.getElementById('age').value || 0
事件对象传值：注意event参数需要函数接收，箭头函数会自动绑定this
跨帧传值：不同域名的iframe会受同源策略限制，需使用postMessage API

相关问题与解答

Q1：如何传递对象或数组给JavaScript？
A1：可以通过以下两种方式：

html把值传给js 第1张

<!-方式1：使用JSON字符串 -->
<input id="data" value='{"name":"李四","skills":["js","html"]}' />
<script>
  let obj = JSON.parse(document.getElementById('data').value);
  console.log(obj.skills[0]); // 输出js
</script>
<!-方式2：通过多个字段传递 -->
<input name="user[name]" value="王五" />
<input name="user[age]" value="30" />
<script>
  let params = new URLSearchParams(window.location.search);
  let user = {name: params.get('user[name]'), age: params.get('user[age]')};
</script>

Q2：动态创建的元素如何获取值？
A2：需要先获取元素引用再操作：

<script>
  // 创建元素
  let newInput = document.createElement('input');
  newInput.id = 'dynamic';
  document.body.appendChild(newInput);
  // 获取值（需等待元素渲染）
  setTimeout(() => {
    alert(document.getElementById('dynamic').value);
  }, 100);