несколько разных кнопок с разным значением, но используется только первая? - PullRequest
0 голосов
/ 02 апреля 2020

Я делаю небольшой "RPG" CYOA, но я столкнулся с проблемой с моим "ящиком выбора", так как только первое поле выбора используется, поскольку попытка выбора других вариантов приведет к тому же результату выбора, что и первый выбор .

Я предполагал, что мне нужно установить массив для значения этих кнопок, но не знал, лежит ли проблема с этим отсутствующим массивом или чем-то еще. Вот Javascript, которые смешаны с Jquery. Область, где ошибка кода выделена жирным шрифтом ... ну, учитывая, что я не могу поместить те, которые в коде выделены жирным шрифтом, она будет помечена ** **

//Use this as script 3 is raw button scenario and script 3 is raw input scenario, this script is playground for hybrid

// JavaScript Document

//SETS ALL VARIABLES FOR THE GAME

    //Mechanic Variables
    //

    //locationexplored
    currentland = "Star Nexus";
    //

    //inventory
    Basicgear = true;
    Advancedgear = false;
    //

    //Lores
    planetname = "güzel dağ" // name of planet in turkish which mean beautiful mountain, given by Indiya.
    planetnameskip = "<p>güzel dağ</p>" // same but with line break.
    planetnamebold = "<b>güzel dağ</b>" // same but with bold.
    //

    //Origins
    originmode = false
    male = false // just change what people call you, no impact on story.
    female = false // just change what people call you, no impact on story.
    blankobg = false // blank easy mode, you have no weakness but no strength.
    bountyhunterobg = false // you pay money for your faction, you have strength of prestart equipment and companions. but weakness of have to support them with credits.
    mercenaryobg = false // You get stuff for your employer, you have strength of prestart base paid by your boss. but weakness of have to get stuff for your boss.
    //

//

//"<b><br><br>Origin: I don't remember...</b> " + "<b><br><br>Origin: For the money!</b> " + "<b><br><br>Origin: My employer want me here. </b>"

//$("<p>Hello</p>").insertBefore("#placeholder_choice")
//$("<center><button id='command_button' size='50'>Origin: I don't remember...</button></center><br>").insertBefore("#placeholder_choice")
//$("<center><button id='command_button' size='50'>Bye</button></center>").insertBefore("#placeholder_choice");

$(document).ready(function() {

    $("#command_line").fadeOut(0000);
    $("#command_button_core").fadeIn(0000);

    $('<p>Welcome to Text Text 7. At any time you may type "help" for a list of commands that you can use.</p>').insertBefore("#placeholder").fadeIn(0000);

    $("<p>You woke up as alarm ranging at your ears. Groaning, you got up and look outside the viewport of your room. You look at a massive space station. Hello, welcome to the Star Nexus, that are orbiting the planet by the name of " + planetnamebold + ".</p> <p>Ahh, yes. I decide to come to this planet because it was recently discovered to have carcass of Illuminated Horror within the planet core. This give the planet the properities of magic, which make it valuable for bounty hunting for the elites. It a good place to go to for ___</p> <p>Please state your Origins for this game. Here your options. </p>").insertBefore("#placeholder").fadeIn(0000, function(){
        originmode = true;
    });

    **
    //Blank Origin
    $("<center><button class='command_button' size='50' value='Blank'>Origin: I don't remember...</button></center><br>").insertBefore("#placeholder_choice");
    //
    //Bounty Hunter Origin
    $("<center><button class='command_button' size='50' value='Bounty Hunter'>Origin: For the money!</button></center><br>").insertBefore("#placeholder_choice");
    //
    //Mercenary Origin
    $("<center><button class='command_button' size='50' value='Mercenary'>Origin: My employer want me here.</button></center><br>").insertBefore("#placeholder_choice");
    //
    **

    $(document).on("click", "#command_button_core", function() {
        $("#command_button_core").fadeOut(0000);
        $(".command_button").fadeIn(0000);
    })

    $(document).on("click", ".command_button", function() {

        var button = $(".command_button").val();

            //Set Origin to Blank
            if (button == "Blank") {
                if (originmode == true && blankobg == false && bountyhunterobg == false && mercenaryobg == false) {
                    blankobg = true;
                    $("<p>I don't really remember why I am here, but I can tell that this is my chance for new life.</p>").insertBefore("#placeholder");
                    $(".command_button").fadeOut(0000);
                }
                else $("<p>Sorry, but you can't change your origin, now that have been set.</p>").insertBefore("#placeholder");
            }
            //

            //set origin to bounty hunter
            else if (button == "Bounty Hunter"){
                if (originmode == true && blankobg == false && bountyhunterobg == false && mercenaryobg == false) {
                    bountyhunterobg = true;
                    $("<p>I came here with my gang to get rich!</p>").insertBefore("#placeholder");
                    $(".command_button").fadeOut(0000);
                }
                else $("<p>Sorry, but you can't change your origin, now that have been set.</p>").insertBefore("#placeholder");
            }
            //

            //set origin to mercenary
            else if (button == "Mercenary"){
                if (originmode == true && blankobg == false && bountyhunterobg == false && mercenaryobg == false) {
                    mercenaryobg = true;
                    $("<p>My boss want me to stay here and find something fancy and valuable and deliver it to him.</p>").insertBefore("#placeholder");
                    $(".command_button").fadeOut(0000);
                }
                else $("<p>Sorry, but you can't change your origin, now that have been set.</p>").insertBefore("#placeholder");
            }
            //

            //When your origins fail
            else
                $("<p>You got this as value: "+"<b>'"+button+"'</b>"+" - but something went wrong!"+"</p>").insertBefore("#placeholder");
            //


        $("form").submit(function() {
            var input = $("#command_line").val();

            $("#console").scrollTop($("#console")[0].scrollHeight);

            $("#command_line").val("");
        });
    });
});

, и это HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./style.css" rel="stylesheet" type="text/css">
    <script src="../../jQuery.js"></script>
    <script src="script2.js" type="text/javascript"></script>
    <title>Text Test 7</title>
</head>
<body>

    </div>

    <div id="container"> <!--Group everything-->

        <div id="console"> <!--All narrative elements here-->

            <p id="story_inventory"></p>

        </div>

    <div id="placeholder"></div> <!--ALLOWS CONTENT TO BE INSERTED BEFORE THIS-->



    <form onsubmit="return false;"> <!--INPUT-->

        <center><input type="text" id="command_line" size="50" autofocus="autofocus" autocomplete="off"></center>

        <br>
    </form>

    <div id="placeholder_choice"></div> <!--Allows choice to be inserted before this-->

    <center><button id="command_button_core" size="50">Next</button></center>

</div>

</body>
</html>

Если кто-нибудь знает ссылку, по которой я могу дать вам такой редактор, как TryItEditor, где я могу сохранить работу и продемонстрировать ее вам, ребята, я буду признателен.

1 Ответ

0 голосов
/ 02 апреля 2020

Ваша проблема в обратном вызове вашего события. Когда вы вызываете

$(".command_button")

, вы получаете массив с тремя кнопками этого класса. Вызов .val() в массиве вернет значение первого.

Обратный вызов события в jQuery получает ключевое слово this, которое ссылается на элемент, вызвавший событие. В вашем случае вам нужно использовать эту клавиатуру, чтобы получить доступ к нажатой кнопке.

Попробуйте изменить код на

//var button = $(".command_button").val();
var button = $(this).val();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...