允許用戶更改與一個按鈕一個JavaScript變量單擊

Question

我有一個JavaScript變量：

var setClickTime = "2000"; 

我想通過點擊一個按鈕，爲用戶提供2000或4000的基礎上自己的喜好選擇。

允許用戶更改此變量的最佳方法是什麼？我曾考慮過有兩個按鈕，其中一個會在點擊時激活課程。這將需要我設置一個if/else語句來根據哪個按鈕處於活動狀態來更改變量。但我對這一點很陌生，我不知道最好的方法。

Answer 1

只要給你的按鈕ID和綁定的聽衆。

說，你有兩個按鈕id="setTime2000"和id="setTime4000"，那麼你只需要：

HTML代碼：

<div> 
    <button id="setTime2000">Set time as 2000</button> 
    <button id="setTime4000">Set time as 4000</button> 
</div> 

JS代碼：

$(document).ready() { 
    var mTime = 2000; // set the default value of time 

    $("#setTime2000").click(function() { 
     mTime = 2000; 
    } 

    $("#setTime4000").click(function() { 
     mTime = 4000; 
    } 

    // ... do something with the variable set 
} 

Answer 2

你只是想要一個按鈕事件監聽器來改變它：

<button id="changeBtn">4000</button> 

JS

var setClickTime = "2000"; 

$("#changeBtn").click(function() { 

    setClickTime = "4000"; 
}) 

Answer 3

首先，你有一個JavaScript變量，它無關的jQuery。

然後，如果你想要簡單的東西，沒有依賴關係。這裏一個簡單的例子：

var myValue = 2000; 
 
updateOutput(); 
 

 
a.addEventListener('click', function() { 
 
    myValue = 2000; 
 
    updateOutput() 
 
}); 
 
b.addEventListener('click', function() { 
 
    myValue = 4000; 
 
    updateOutput() 
 
}); 
 

 

 
function updateOutput() { 
 
    output.value = myValue; 
 
}

<button id="a">2000</button> 
 
<button id="b">4000</button> 
 
<input readonly id="output">

Answer 4

純JavaScript中的通用的答案。

<button class='setTime'> 
    2000 
</button> 

<button class='setTime'> 
    4000 
</button> 

純JavaScript：

var setClickTime = ""; 

var buttons = document.getElementsByClassName('setTime') 
for (i = 0; i < buttons.length; i++) { 
    this.onclick = function setTime(event) { 
    setClickTime = event.target.innerHTML; 
    alert(setClickTime); 
    } 
} 

小提琴：https://jsfiddle.net/b1vy8ahp/

Answer 5

可以定義多個radiobuttons爲更多的選擇（具有相同名稱的屬性將它們分組），然後就delegate或bind一個change該組radiosbuttons的事件以獲得選定的值。

<input type="radio" name="test" value="2000">2000 
<input type="radio" name="test" value="4000">4000 
<script> 
var setClickTime; 
$('input:radio[name=test]').on('change',function() 
{ 
    setClickTime = this.value; 
}); 
</script> 

例子：https://jsfiddle.net/DinoMyte/71hgeqnb/1/