如何在html / javascript的下拉菜单中基于用户选项更改变量
[英]How do I change a variable based on the users option from a drop down menu in html/javascript
问题描述
I have researched and have been trying to figure this problem out for a few days. 
我已经研究了几天，一直在努力解决这个问题。 Haven't found anything that really helps other than make it more complex. 除了使其变得更复杂之外，没有找到其他真正有用的东西。 I'm trying to change the variable health, based on what level their character is which they can choose from a drop down menu. 我正在尝试根据其角色的级别来更改变量运行状况，从下拉菜单中可以选择他们的角色。 I can't figure out how to do the javascript function and call the answer that they have in the drop down menu. 我不知道如何执行javascript函数并在下拉菜单中调用他们具有的答案。 Any help will be greatly appreciated! 任何帮助将不胜感激！ Here's my code: 这是我的代码：
<!DOCTYPE html>
<html>
<head>League Of Legends Damage Calculator<title>
</title>
</head>
<body>
<p>
<script>
var health;
var ad;
var adspeed;
var movespeed;
var healthregen;
var armor;
var apresist;
</script>
</p>
<p>
Aatrox Base Stats: <br>
<img src="http://ddragon.leagueoflegends.com/cdn/4.5.4/img/champion/Aatrox.png" width="150" height="150"> <br>
<script>
document.write("Health - " + health);
</script>
Basic Attack Damage - 55
Basic Attack Speed - .651
Movement Speed - 345
Health Regen - 5.75
Armor - 18
Magic Resist - 40
</p>
<p>
<form name="form1">
<select id="opts" onchange="showForm()">
<option value="0">Level Stats - 1</option>
<option value="1">Level Stats - 2</option>
<option value="2">Level Stats - 3</option>
<option value="3">Level Stats - 4</option>
<option value="4">Level Stats - 5</option>
<option value="5">Level Stats - 6</option>
<option value="6">Level Stats - 7</option>
<option value="7">Level Stats - 8</option>
<option value="8">Level Stats - 9</option>
<option value="9">Level Stats - 10</option>
<option value="10">Level Stats - 11</option>
<option value="11">Level Stats - 12</option>
<option value="12">Level Stats - 13</option>
<option value="13">Level Stats - 14</option>
<option value="14">Level Stats - 15</option>
<option value="15">Level Stats - 16</option>
<option value="16">Level Stats - 17</option>
<option value="17">Level Stats - 18</option>
</select>
</form>
<script>
function Stats(form1) {
var decidelevel;
decidelevel = document.getElementById('opts');
if(decidelevel = "0"){
health = 395;
};
if(decidelevel = "1") {
health = 395 + (85 * decidelevel);
};
// etc
};
</script>
</p>
</body>
</html>
2 个解决方案
解决方案1
0 已采纳 2014-04-18 02:23:58
You've got a couple problems: First, the <select> is calling showForm() when it changes, but I don't see a function named showForm in your javascript. 您遇到了两个问题：首先， <select>在更改时正在调用showForm() ，但是我在JavaScript showForm不到名为showForm的函数。 You should change that to stats() . 您应该将其更改为stats() 。 Then, you're properly doing decidelevel=document.getElementById('opts'); 然后，您可以正确地进行decidelevel=document.getElementById('opts'); , but you need to go a step further: decidedlevel=document.getElementById('opts').value; ，但您需要走得更远： decidedlevel=document.getElementById('opts').value; will do it. 会做的。
EDIT: 编辑：
An easier way to write all those if statements would be using a switch : 编写所有这些if语句的更简单方法是使用switch ：
switch(decidedlevel){
case 0:
//do stuff
break;
case 1:
//do other stuff
break;
//etc
default:
//if none match, this happens
break;
}
EDIT2: PS: EDIT2：PS：
You are also doing your if statement's incorrectly - if (var=1) will assign var to 1 . 您也正在错误地执行if语句-if if (var=1)会将var分配给1 。 Instead, use if (var==1) to get a true/false. 而是使用if (var==1)来获得true / false。
Cheers! 干杯!
解决方案2
0 2014-04-18 03:02:37
In the onchange event you're calling showForm() function which does not exist. 在onchange事件中，您将调用不存在的showForm（）函数。 You should change it to Stats(); 您应该将其更改为Stats（）;
<select id="opts" onchange="Stats()">
Then inside the Stats() function, you should retrieve the selected index by calling 然后在Stats（）函数中，您应该通过调用以下内容来检索选定的索引：
decidelevel = document.getElementById('opts').value;
Also in the if condition inside Stats() function you should use == or === 同样在Stats（）函数中的if条件中，您应该使用==或===
if(decidelevel === "0"){
See Working example below 请参阅下面的工作示例
<!DOCTYPE html>
<html>
<head>League Of Legends Damage Calculator<title>
</title>
</head>
<body>
<p>
<script>
var health;
var ad;
var adspeed;
var movespeed;
var healthregen;
var armor;
var apresist;
</script>
</p>
<p>
Aatrox Base Stats: <br>
<img src="http://ddragon.leagueoflegends.com/cdn/4.5.4/img/champion/Aatrox.png" width="150" height="150"> <br>
<script>
<!--document.write("Health - " + healthregen); -->
</script>
Basic Attack Damage - 55
Basic Attack Speed - .651
Movement Speed - 345
Health Regen - <span id="health">5.75</span>
Armor - 18
Magic Resist - 40
</p>
<p>
<form name="form1">
<select id="opts" onchange="Stats()">
<option value="0">Level Stats - 1</option>
<option value="1">Level Stats - 2</option>
<option value="2">Level Stats - 3</option>
<option value="3">Level Stats - 4</option>
<option value="4">Level Stats - 5</option>
<option value="5">Level Stats - 6</option>
<option value="6">Level Stats - 7</option>
<option value="7">Level Stats - 8</option>
<option value="8">Level Stats - 9</option>
<option value="9">Level Stats - 10</option>
<option value="10">Level Stats - 11</option>
<option value="11">Level Stats - 12</option>
<option value="12">Level Stats - 13</option>
<option value="13">Level Stats - 14</option>
<option value="14">Level Stats - 15</option>
<option value="15">Level Stats - 16</option>
<option value="16">Level Stats - 17</option>
<option value="17">Level Stats - 18</option>
</select>
</form>
<script>
function Stats(form1) {
var decidelevel=0;
decidelevel = document.getElementById('opts').value;
switch(decidelevel){
case "0":
healthregen = 100;
break;
case "1":
healthregen = 200;
break;
default:
healthregen = 999;
break;
}
document.getElementById('health').innerHTML = healthregen;
};
</script>
</p>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.