更新全局變量在具有一個多Onclicks的

Question

我有三個的div，每個具有一個onclick（一個，b，和Ç）。我希望每個發送一個唯一的值返回到一個全局變量X（例如一個使得X = 1，b使得X = 2，等等）。我一度獲得了一些小小的成功，但現在看起來代碼只是從上到下運行，忽略了其他功能，並且簡單地使x等於最後一個函數的更新值，c。

HTML：

<div id='testChoice'>Choose action</div> 
<div id='a'>a</div> 
<div id='b'>b</div> 
<div id='c'>c</div> 

JS：

var x = ""; 

function aChoice() { 
    this.x = "a"; 
} 

function bChoice() { 
    x = "b"; 
} 

function cChoice() { 
    x = "c"; 
} 

document.getElementById("a").onclick = aChoice(); 
document.getElementById("b").onclick = bChoice(); 
document.getElementById("c").onclick = cChoice(); 

document.getElementById("testChoice").innerHTML = x; 

可變X（它只是顯示在HTML用於測試）是我想更新的東西。它將被更改爲一個int值以用於其他函數。這個想法是，用戶的選擇將更新然後傳遞給其他功能的變量。現在，x總是作爲c出現，並且沒有識別出onclick。

謝謝你的幫助！

Answer 1

你重複了很多代碼。這將是一個簡單的方法來實現你想要的。

var x = ""; 
 

 
function choice(value) { 
 
    x = value; 
 
    document.getElementById("testChoice").innerHTML = value; 
 
} 
 

 
document.getElementById("a").onclick = choice.bind(null, "a") 
 
document.getElementById("b").onclick = choice.bind(null, "b") 
 
document.getElementById("c").onclick = choice.bind(null, "c")

<div id='testChoice'>Choose action</div> 
 
<div id='a'>a</div> 
 
<div id='b'>b</div> 
 
<div id='c'>c</div>

而且，當前的代碼總是顯示c，因爲你的最後一行只執行一次。並且最後一次x被分配一個值是當你說cChoice()。

Answer 2

這個將幫助你。對於OnClick你應該只提供函數名稱。 aChoice()實際上會在添加onclick偵聽器時調用。您得到的是最後一個函數輸出，因爲cChoice是按順序執行的最後一個函數。

var x = ""; 
 

 
function aChoice() { 
 
    x = "a"; 
 
    document.getElementById("testChoice").innerHTML = x; 
 
} 
 

 
function bChoice() { 
 
    x = "b"; 
 
    document.getElementById("testChoice").innerHTML = x; 
 
} 
 

 
function cChoice() { 
 
    x = "c"; 
 
    document.getElementById("testChoice").innerHTML = x; 
 
} 
 

 
document.getElementById("a").onclick = aChoice; 
 
document.getElementById("b").onclick = bChoice; 
 
document.getElementById("c").onclick = cChoice;

<div id='testChoice'>Choose action</div> 
 
<div id='a'>a</div> 
 
<div id='b'>b</div> 
 
<div id='c'>c</div>

Answer 3

隨着let或方式關閉可以是一個很好的解決

\t var test = document.querySelectorAll(".test"); 
 
\t for (let i = 0; i < test.length; i++) { 
 
\t \t test[i].onclick = function() { 
 
\t \t \t document.getElementById("testChoice").innerHTML = test[i].innerHTML; 
 
\t \t } 
 
\t }

<div id='testChoice'>Choose action</div> 
 
<div class="test">a</div> 
 
<div class="test">b</div> 
 
<div class="test">c</div>