Новое в javascript, переключатели не работают, запрещено использовать параметры - PullRequest
Новая
       11

Новое в javascript, переключатели не работают, запрещено использовать параметры

1 голос
/ 30 ноября 2011

Я пытаюсь создать радиокнопки с функцией javascript, которая вызывается при нажатии кнопки для отображения изображения в зависимости от того, что они нажимают. Однако, посмотрев некоторое время, я ничего не имею, так как некоторые говорят мне, что нужно делать document.formName.name.value; некоторые говорят мне использовать идентификатор с моими кнопками и просто использовать document.getElementByID(""); и т. д.

Это для проекта, и мы еще не использовали параметры, и я не знаю, как их реализовать и в HTML

Это мой код: 

<html>
<head>
    <style type="text/css">
        img{height:200px;}
        body{background-image:url('wood.jpg');}
        span.a1{margin-left:150px; display:inline-block;}
        h2, span, h4, div{font-family:helvetica; color:white;}
        h2 {text-align:center; margin-top:150px;}
        img.display{position:absolute; left:400px; height:300px; }
    </style>
    <script type="text/javascript">
        dex1=0;
        stam1=0;
        str1=0;
        intel1=0;
        agil1=0;
        function counter()
        {
            document.getElementById("dex").innerHTML = dex1;
            document.getElementById("stam").innerHTML = stam1;
            document.getElementById("str").innerHTML = str1;
            document.getElementById("intel").innerHTML = intel1;
            document.getElementById("agil").innerHTML = agil1;
        }
        function classChoice()
        {
            if(document.getElementById('mage').checked)
                {
                    classtype = "<img class='display' src='mage.jpg'>";
                    document.getElementById("mage").innerHTML=classtype;
                }
            else if(document.getElementById('paladin').checked)
                {
                    classtype = "<img class='display' src='paladin.jpg'>";
                    document.getElementById("Paladin").innerHTML=classtype;
                }
            else if(document.getElementById('hunter').checked)
                {
                    classtype = "<img class='display' src='hunter.jpg'>";
                    document.getElementById("hunter").innerHTML=classtype;
                }
            else if(document.getElementById('rogue').checked)
                {
                    classtype = "<img class='display' src='rogue.jpg'>";
                    document.getElementById("rogue").innerHTML=classtype;
                }
        }
    </script>
</head>
<body>
    <h2> Awesome MMO </h2>
    <span class="a1">
        <h4> Dexterity </h4>
        <span onmousedown="dex1++; counter();">
            +
        </span>
        <span id="dex">
        0
        </span>
        <span onmousedown="dex1--; counter();">
            -
        </span>
    </span>
    <span class="a1">
        <h4> Stamina </h4>
        <span onmousedown="stam1++; counter();">
            +
        </span>
        <span id="stam">
        0
        </span>
        <span onmousedown="stam1--; counter();">
            -
        </span>
    </span>
    <span class="a1">
        <h4> Strength </h4>
        <span onmousedown="str1++; counter();">
            +
        </span>
        <span id="str">
        0
        </span>
        <span onmousedown="str1--; counter();">
            -
        </span>
    </span>
    <span class="a1">
        <h4> Intellect </h4>
        <span onmousedown="intel1++; counter();">
            +
        </span>
        <span id="intel">
        0
        </span> 
        <span onmousedown="intel1--; counter();">
            -
        </span>
    </span>
    <span class="a1">
        <h4> Agility </h4>
        <span onmousedown="agil1++; counter();">
            +
        </span>
        <span id="agil">
        0
        </span>
        <span onmousedown="agil1--; counter();">
            -
        </span>
    </span>
            <h2> Class </h2>
            <span class="a1">
            <br />
            <form name="class">
                    <input type="radio" name = "classes" id="mage" onmousedown="classChoice();"> <img src = "mage.jpg" />
                    <input type="radio" name = "classes" id = "Paladin" onmousedown="classChoice();"> <img src = "Paladin.png" />
                    <input type="radio" name = "classes" id = "hunter" onmousedown="classChoice();"> <img src = "hunter.PNG" />
                    <input type="radio" name = "classes" id = "rogue" onmousedown="classChoice();"> <img src = "rogue.jpg" />           
            </form>
            </span>
    <span id="picture">
    </span>
</body>

Ответы [ 4 ]

2 голосов
/ 30 ноября 2011

Я думаю, что вы можете проверить jQuery для этого - это определенно может сделать ваши вещи проще.

Ссылка на jQuery Home

Используя эту библиотеку, вы могли бы упростить свой код - вот полу-полный пример, основанный на ваших требованиях - он рассматривает только событие click на переключателе - вам нужно добавить проверку, чтобы увидеть, является ли элемент уже проверено: 

$('input').click(function () {
    if ($(this).attr('id') == 'mage') {
    //add code here to set the source of your image
    $(myImage).attr('src','path/to/your/chosen/image');
});

Вы можете повторить с другими инструкциями if для обработки каждого из ваших случаев или написать более элегантное решение. Изучение библиотеки, такой как jQuery (или других, таких как prototype или extjs), значительно сократит время, затрачиваемое на написание javascript, и улучшит кросс-браузерную совместимость вашей работы

1 голос
/ 04 декабря 2011

Как оказалось, onmousedown делает так, что мне пришлось бы дважды щелкать по каждой радиокнопке, как я случайно обнаружил, сердито нажимая на мою кнопку.

1 голос
/ 30 ноября 2011

Получение переключателей по идентификатору должно быть в порядке, но используйте свойство checked, чтобы проверить, проверены ли они в данный момент: 

if(document.getElementById('mage').checked)
{
     classtype = "<img class='display' src='mage.jpg'>";
     document.getElementById("picture").innerHTML=classtype;         
}

Конечно, ваш html не показывает элемент с идентификаторомof "picture" - вы просто не показывали это?

Вы также захотите изменить имя в своей форме - если оно будет иметь то же имя, что и ваши радиокнопки, это может вызвать проблемы.Предполагая, что вы должны изменить его на «frm», вы можете получить доступ к коллекции всех ваших переключателей, например: 

var allRadios = document.getElementsByName("classes");
0 голосов
/ 30 ноября 2011

Вам следует использовать change() функцию jQuery, если вы хотите что-то делать при каждом изменении выбора. 

$('#myRadioButton').change(function(){

    // Do whatever you want to do with the new value 
    // You get the value with $(this).val()

});
...