JavaScript如何在onclick属性的函数调用中定义传入参数值

可以实现。原代码运行失败是两个语法问题导致的，和JS是否支持内联事件传参无关：

• 第一是HTML引号嵌套冲突：onclick属性本身用双引号包裹，内部写value="planet"时，planet前后的双引号会被HTML解析器识别为onclick属性的结束标记，属性值被截断，最终执行的JS代码残缺，直接报语法错。
• 第二是冗余的赋值写法：JS函数默认按位置匹配实参和形参，调用时不需要写形参名=值的格式。你写的value="planet"是赋值表达式，执行时会先隐式创建全局变量value再传值，会污染全局作用域。

正确实现方式 #

• 最简内联写法
  把内部字符串的引号换成单引号，和外层属性的双引号错开，同时去掉冗余的赋值逻辑，直接传参即可：

  <a href="javascript;;" onclick="helloWorld('planet')">
  

  点击链接时helloWorld的形参value就能正确拿到"planet"值。

• 双引号转义写法
  如果需要在属性内用双引号包裹字符串，用HTML实体"转义内部双引号即可，避免和外层属性引号冲突：

  <a href="javascript;;" onclick="helloWorld(&quot;planet&quot;)">
  

  这种写法可读性差，日常开发不推荐。

• 规范分离写法（推荐）
  不建议把JS逻辑直接写在HTML属性里，把结构和逻辑分离可以从根源上避免引号转义问题，可维护性更强：

  <!-- HTML结构 -->
  <a href="javascript;;" id="greetLink">触发函数</a>
  

  // JS逻辑
  function helloWorld(value) {
    return value
  }
  document.getElementById('greetLink').addEventListener('click', () => {
    helloWorld('planet')
  })
  

如果你需要显式指定参数名（比如多参数场景下怕传错位置），可以给函数加对象参数解构，内联调用时传对象即可：

function helloWorld({ value }) {
  return value
}

对应内联写法：onclick="helloWorld({value: 'planet'})"

内容的提问来源于stack exchange，提问作者devdude19289