Question

使用此JavaScript：

function test1() { console.log('Test 1'); }
function test2() { console.log('Test 2'); }

const button = document.getElementById('button');  

button.onclick = function() { test1(); }
button.onclick = function() { test2(); }

和此HTML

<button id="button">RGB</button>

当我单击按钮时，控制台中仅显示“ Test 2”。

为什么会这样？为什么两个函数都没有执行？

Answer 1

看看这两行看起来有多相似

$str="tracking_id : ".$tracking_id."\npayment_mode : ".$payment_mode.
  "\ncard_name : ".$card_name."\nstatus_message : ".$status_message.
  "\nbank_ref_no : ".$bank_ref_no;
$qry ="UPDATE cb_all_state set comment='". mysqli_real_escape_string($str). "' WHERE id=1";
$sql=mysqli_query($connect,$qry);

更清晰

button.onclick = function() { test1(); }
button.onclick = function() { test2(); }

就像我们已经覆盖let a = "foo"; a = "bar"; console.log(a);一样，您也要通过为其分配多次来覆盖a。

您现在通常button.onclick，而不是使用addEventListener。

onclick

Answer 2

当我单击按钮时，控制台中仅显示“ Test 2”。

这是因为第二个功能正在替换分配给onclick的上一个功能。您可以避免使用两个onclick并从test2呼叫test1

function test1() {
  console.log('Test 1');
  test2();
}

function test2() {
  console.log('Test 2');
}

const button = document.getElementById('button');

button.onclick = function() {
  test1();
}

<button id="button">RGB</button>

Answer 3

更改button.onclick时，它不会合并先前的值和新的值。取而代之的是，前一个被新的替换。 n

将变量分配给值时。先前的值将被新的值覆盖。

如果您要为单个事件附加多个功能，请使用addEventListener

function test1() { console.log('Test 1'); }
function test2() { console.log('Test 2'); }
const button = document.getElementById('button');  
button.addEventListener('click',test1) ;
button.addEventListener('click',test2)

<button id="button">Click me</button>

为onclick分配多个功能只会触发最后一个

3 个答案: