通过onClick选择选项
[英]Chosen option by onClick
问题描述
Hello I'm new in JavaScript, How can I get the Fruit1 and Fruit2 after I click the button "Click me" 
您好，我是JavaScript Fruit1 ，点击"Click me"按钮后如何获得Fruit1和Fruit2
For Example : If I click the button, then choose 2 of fruits from the option. 例如：如果我单击按钮，则从选项中选择2种水果。 if I were to choose Apple and Banana then it should alert "You choose Apple and Banana" 如果我要选择苹果和香蕉，那么它应该提醒"You choose Apple and Banana"
<html>
<head>
<script type="text/javascript">
function yourChoose() {
alert("Now, let's choose 2 fruit do you like ?");
// code for i choose 2 fruits
var Fruit1 = .....;
var Fruit2 = .....;
alert("You choose "+Fruit1+" and "+Fruit2)
}
</script>
</head>
<body>
<button name="clickme" onclick="yourChoose()" >click me </button><br/>
<a href=""> Apple </a><br/>
<a href=""> Banana </a><br/>
<a href=""> Coconut </a><br/>
<a href=""> Durian </a><br/>
<a href=""> ElderBerry </a>
</body>
</html>
4 个解决方案
解决方案1
2 已采纳 2014-02-20 14:28:53
Here is example without jquery but with OOP :) 这是没有jquery但带有OOP的示例：）
<html>
<head>
<script type="text/javascript">
function Fruiter(){ // Class that manage your fruits
this.addFruit = function(fr){ // adding fruits
if (this.fr1) {
this.fr2 = fr;
alert("You choose "+this.fr1+" and "+this.fr2); // show messages when all fruits choosed
} else {this.fr1 = fr;}
}
this.chooseFruit = function(fr){ // choosing fruits / reseting
this.fr1 = null;
alert("Now, let's choose 2 fruit do you like ?");
}
}
var f = new Fruiter();
</script>
</head>
<body>
<button name="clickme" onclick="f.chooseFruit()" >click me </button><br/>
<a href="#" onclick="f.addFruit('Apple')"> Apple </a><br/>
<a href="#" onclick="f.addFruit('Banana')"> Banana </a><br/>
<a href="#" onclick="f.addFruit('Coconut')"> Coconut </a><br/>
<a href="#" onclick="f.addFruit('Durian')"> Durian </a><br/>
<a href="#" onclick="f.addFruit('ElderBerry')"> ElderBerry </a>
</body>
</html>
解决方案2
1 2014-02-20 13:47:46
Add the following javascript: 添加以下javascript：
var fruit1=""; //set the global variables
var fruit2="";
function selectFruit(name){
fruit2=fruit1; //this will set the global variables
fruit1=name; //at only 1 point of time 2 fruits are selected!
}
The function selectFruit will make sure that only the latest 2 clicked fruits are stored 函数selectFruit将确保仅存储最近单击的2个水果
Next, change your links to the following: 接下来，将您的链接更改为以下内容：
<a href="javascript:void(0)" onclick="selectFruit('Apple')"> Apple </a><br/>
<a href="javascript:void(0)" onclick="selectFruit('Banana')"> Banana </a><br/>
<a href="javascript:void(0)" onclick="selectFruit('Coconut')"> Coconut </a><br/>
<a href="javascript:void(0)" onclick="selectFruit('Durian')"> Durian </a><br/>
<a href="javascript:void(0)" onclick="selectFruit('ElderBerry')"> ElderBerry </a><br/>
解决方案3
0 2014-02-20 13:45:36
Here's a solution with jQuery : http://jsfiddle.net/guy777/8mJG5/ 这是jQuery的解决方案： http : //jsfiddle.net/guy777/8mJG5/
HTML : HTML：
<button id='btn' name="clickme">click me </button><br/>
<a href=""> Apple </a><br/>
<a href=""> Banana </a><br/>
<a href=""> Coconut </a><br/>
<a href=""> Durian </a><br/>
<a href=""> ElderBerry </a>
JavaScript : JavaScript：
$('#btn').on('click', function(e) {
var a = $('a');
var fruits = [];
$.map(a, function(fruit) {
fruits.push(fruit.text);
});
console.log(fruits);
});
解决方案4
0 2014-02-20 13:47:00
U can use this > http://fiddle.jshell.net/gUryq/3/ 您可以使用此> http://fiddle.jshell.net/gUryq/3/
var fruits = { fruit1 : "", fruit2 : ""};
$("#clickme").click(function() {
if(fruits.fruit1 == "" && fruits.fruit2 == "") {
alert("Now, let's choose 2 fruit do you like ?");
} else {
alert("pls choose the other fruit first!");
}
});
... jquery in use! ... jquery正在使用中！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.