允许用户更改与一个按钮一个JavaScript变量单击

我有一个JavaScript变量：允许用户更改与一个按钮一个JavaScript变量单击

var setClickTime = "2000";

我想通过点击一个按钮，为用户提供2000或4000的基础上自己的喜好选择。

允许用户更改此变量的最佳方法是什么？我曾考虑过有两个按钮，其中一个会在点击时激活课程。这将需要我设置一个if/else语句来根据哪个按钮处于活动状态来更改变量。但我对这一点很陌生，我不知道最好的方法。

来源

2016-02-12 Anthony_Z

首先使它工作，那么如果这样做，或没有，你将有更多的信息来决定是否你的选择是好的。 – Niloct

下拉列表，两个按钮，单选按钮，标签单击，不管 – Shockwave

如果用户要在点击过程中选择一个值并截取所选选项，则应该使用单选按钮。 – DinoMyte

只要给你的按钮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 
}

来源

2016-02-12 23:14:25

Ares Ou这是一个非常好的答案。谢谢你的例子。 –

你只是想要一个按钮事件监听器来改变它：

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

var setClickTime = "2000"; 

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

    setClickTime = "4000"; 
})

来源

2016-02-12 23:12:18 Cory

我很喜欢此答案Cory。非常简单可靠。我没有想到这样做。 –

首先，你有一个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">

来源

2016-02-12 23:13:00

你不需要2个事件。 $（'button'）。click（function（）{myValue = $（this）.text（）;}）;将是更直接和更好的方式。 – DinoMyte

为什么你应该依靠jQuery来完成这么简单的任务？顺便说一下，jQuery在内部也创建了两个事件监听器。 –

纯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/

来源

2016-02-12 23:18:16 Michelangelo

可以定义多个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/

来源

2016-02-12 23:21:37 DinoMyte

你应该听取更改事件，而不是点击 –

是。这会更有意义。 – DinoMyte

允许用户更改与一个按钮一个JavaScript变量单击

回答

相关问题