lundi 4 avril 2016

Jquery Input Text

I have been searching for a similar question/answer and didn't see one. Apologies in advance if this is a duplicate.

I am creating a text-based game in JS. This is my 1st time creating a project from scratch. All the text happens in the #dialog div and I want to have the user input to correspond to if-else function choices and generate text in the for the new options.

I have the first transition(the text from intro game changes to the text in scene one when clicked)working. What is not working is the choice selection text input. Anything I enter refreshes the game. I also put in an alert to test it and that does not run.

Another question I have is if the variables for the new choices which I have put in the if/else statement will run as coded or if I need to make changes. Some options will occur more than once so I will want it to run from inside multiple scenes.

HTML

    <div id="dialog">
    </div>
    <div class="form">
    <form id="my-form"> 
    <input type="text" id="userData" placeholder="enter move here">
    <button type="submit" class="btn">play</button>
    </form>
    </div>    

JS // game dialog box / adds paragraph to the #dialog div // User move - form input

    var addParagraph = $('#dialog');
    var userMove = $("#userData").val();

//intro game text

    var introGame = $(function () {
    $(addParagraph).append('<p> My Text.. </p>');
    });

//1st scene of game. Player chooses 1,2 or 3. Choice triggers new text in dialog box and new set choices or player outcomes.

    var scene1 = $(function () {
    $(introGame).click(function() {
    $(addParagraph).text('Move Question Text');
    $(addParagraph).append("<p> 1.Choice Description </p>");
    $(addParagraph).append("<p> 2.Choice Description </p>");
    $(addParagraph).append("<p> 3.Choice Description </p>");
    $(addParagraph).append("<p> Enter: 1, 2, or 3 below </p>");

    var playMove = function() {
    $("#my-form").submit(function() {
    var text = userMove;
    var move = template(text);

    if(text == '') {
    return false;
    } else if(text == '1') {
    $(scene1).click(function () {
    evasiveManuevers();
    });  
    } else if(text == '2') {
    $(scene1).click(function () {
    lightSpeed();
    });
    } else if(text == '3') {
    $(scene1).click(function () {
    fightEnemy();
    });
    } else {
    alert("Working!");
    }    
    });
    };
    });
    });

Thank you in advance!

Aucun commentaire:

Enregistrer un commentaire