如何在 onclick 函数调用中传递变量？

Question

我对如何将变量传递到 onclick 属性内的函数调用有疑问。 这实际上是一种不好的做法，但我仍然想知道以备不时之需。

例如：

let parsed = document.querySelector('input').value.replace('/\^/','**');
function evaluat(expr){
    console.log(eval(expr));
  }

<input></input>
<p><button onclick="evaluat(parsed)">Compute</button></p>

此代码为输入 5^2 打印 undefined 而不是预期的 25。

Answer 1

可以使用 a closure，并将输入传递给作为点击侦听器返回的函数。

const input = document.querySelector('input');
const button = document.querySelector('button');

button.addEventListener('click', evaluat(input), false);

function evaluat(input) {
  return function () {
    const str = input.value.replace('^', '**');
    console.log(eval(str));
  }
}

<input></input>
<p><button>Replace</button></p>

Answer 2

建议您为您的元素指定一个唯一的 ID 以避免歧义。

function evaluat(expr) {
  let val = document.getElementById('parsed').value.replace('^', '**');
  console.log(eval(val));
}

<input id="parsed"></input>
<p><button  onclick="evaluat()">Replace</button></p>

Answer 3

假设您以空输入开始您的页面，parsed 变量已经计算为 ''。在你的 evaluat（应该是 evaluate）函数中，你还没有再次检索到 document.querySelector('input').value 的值，所以函数 evaled 是一个空字符串，这就是为什么它记录 undefined.

您需要将函数更改为...

function evaluat() {
  console.log(
    eval(document.querySelector('input').value.replace(/\^/,'**'))
  );
}

您不必将任何参数传递给此函数，因为它会在每次执行时查询 DOM。

顺便说一句，请注意 eval() 是危险的。避免使用它。

Answer 4

因为 onclick 是一个 javascript 函数，你可以像这样在里面使用 javascript :

function evaluat(expr){
  console.log(eval(expr));
}

<input></input>
<p><button onclick="evaluat(document.querySelector('input').value.replace('/\^/','**'))">Replace</button></p>

但是您不能在 html 中使用 javascript 存储的变量。但是你可以使用returns你想要的值的函数：

function evaluat(expr){
  console.log(eval(expr));
}

var parse = function () {
  return document.querySelector('input').value.replace('/\^/','**');
};

var parse2 = document.querySelector('input').value.replace('/\^/','**')

<input></input>
<p><button onclick="evaluat(parse())">Replace</button></p> <!-- OK -->
<p><button onclick="evaluat(parse2)">Replace</button></p> <!-- undefined -->

如何在 onclick 函数调用中传递变量？

How to pass in variables inside function calls at onclick?

javascript

variables

dom

scope

onclick