如何在html / javascript的下拉菜單中基於用戶選項更改變量

Question

我已經研究了幾天，一直在努力解決這個問題。 除了使其變得更復雜之外，沒有找到其他真正有用的東西。 我正在嘗試根據其角色的級別來更改變量運行狀況，從下拉菜單中可以選擇他們的角色。 我不知道如何執行javascript函數並在下拉菜單中調用他們具有的答案。 任何幫助將不勝感激！ 這是我的代碼：

<!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>

Answer 1

您遇到了兩個問題：首先， <select>在更改時正在調用showForm() ，但是我在JavaScript showForm不到名為showForm的函數。 您應該將其更改為stats() 。 然后，您可以正確地進行decidelevel=document.getElementById('opts'); ，但您需要走得更遠： decidedlevel=document.getElementById('opts').value; 會做的。

編輯：

編寫所有這些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：

您也正在錯誤地執行if語句-if if (var=1)會將var分配給1 。 而是使用if (var==1)來獲得true / false。

干杯!

Answer 2

在onchange事件中，您將調用不存在的showForm（）函數。 您應該將其更改為Stats（）;

<select id="opts" onchange="Stats()">

然后在Stats（）函數中，您應該通過調用以下內容來檢索選定的索引：

decidelevel = document.getElementById('opts').value;

同樣在Stats（）函數中的if條件中，您應該使用==或===

if(decidelevel === "0"){

請參閱下面的工作示例

<!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>

如何在html / javascript的下拉菜單中基於用戶選項更改變量

問題描述

2 個解決方案

解決方案1
0 已采納 2014-04-18 02:23:58

解決方案2
0 2014-04-18 03:02:37

如何在html / javascript的下拉菜單中基於用戶選項更改變量

問題描述

2 個解決方案

解決方案1 0 已采納 2014-04-18 02:23:58

解決方案2 0 2014-04-18 03:02:37

解決方案1
0 已采納 2014-04-18 02:23:58

解決方案2
0 2014-04-18 03:02:37