Как изменить переменную на основе опции пользователей из выпадающего меню в html / javascript

0

Я исследовал и пытался понять эту проблему на несколько дней. Не нашли ничего, что действительно помогло бы, кроме как сделать его более сложным. Я пытаюсь изменить состояние переменной, исходя из того, на каком уровне их характер, который они могут выбрать из выпадающего меню. Я не могу понять, как выполнить функцию 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>
Теги:
drop-down-menu

2 ответа

0
Лучший ответ

У вас есть пара проблем: во-первых, <select> вызывает showForm() когда он изменяется, но я не вижу функцию с именем showForm в вашем javascript. Вы должны изменить это на 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 (var=1) присвоит var к 1. Вместо этого используйте if (var==1) чтобы получить true/false.

Ура!

  • 0
    Это решило мою проблему с вызовом переменной, и оператор switch помог сэкономить ALOT места, но он все равно заменил мою переменную здоровья на undefined. Есть идеи, как это исправить?
  • 0
    Похоже, вы пытаетесь вставить переменную «здоровье» в DOM, прежде чем что-то присвоить ей - см .: <script> document.write("Health - " + health); </script> Чтобы сделать это правильно, я бы предложил заменить весь этот <script> на что-то вроде <madeUpTag>Health:</madeUpTag> а затем в работающую функцию <madeUpTag>Health:</madeUpTag> это (после того, как вы назначите что-то переменная 'health'): document.getElementsByTagName("madeUpTag")[0].innerHTML="Health: "+health; Таким образом, он обновляет его после установки переменной.
Показать ещё 3 комментария
0

В событии onchange вы вызываете функцию showForm(), которая не существует. Вы должны изменить его на Stats();

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

Затем внутри функции Stats() вы должны получить выбранный индекс, вызвав

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

Также в условии if внутри функции Stats() вы должны использовать == или ===

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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню