javascript – Set a dynamic variable?-ThrowExceptions

Exception or error:

This may be extremely simple, but my brain’s just not grasping this for some reason.

I’m making a Tic-Tac-Toe/Hollywood Squares game, and all the square variables are set to null
square0Value = “”;
square1Value = “”;
etc.

When you click on one of the squares, it launches a bootstrap modal with a closeup of the square and two buttons, X and O, and passes all of the data from the grid square into the modal, so that I only need one modal markup block.

When you click the X or the O, I need it to dynamically set the square variable, that is associated with the modal to either X or O, once the modal is closed, another javascript function checks all the variables to see if there’s a 3-in-a-row occurrence, and displays a console.log that X or O has won the game. But I’m not writing this correctly, and none of the square variables are being set.

Here’s my code:

HTML:

<button class="squareButton" data-toggle="modal" data-target="#squareModal" data-square="" data-nameplate="" data-xo="" data-id="square0">
     <div class="xo"></div>
     <div class="nameplate"></div>
     <div class="desk"></div>
</button>

(I have this replicated 9 times.)

[Modal markup]

<div class="modal fade-scale" id="squareModal" tabindex="-1" role="dialog" aria-labelledby="squareModal">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="square">
            <div class="squareModal">
                <div class="xo"></div>
                <div class="nameplate"></div>
                <div class="desk"></div>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" id="modalX" class="btn btn-default btn-xo" data-dismiss="modal">X</button>
        <button type="button" id="modalO" class="btn btn-default btn-xo" data-dismiss="modal">O</button>
      </div>
    </div>
  </div>
</div>

JS:
I have an array built that populates each square with a celebrity/personality, and an document.ready function that shuffles the array populates the squares:

$(document).ready(function(){
    shuffle(squares);
    for (i = 0; i < 9; i++) { 
        $("#square"+i).find('.squareButton').addClass(squares[i][0]);
        $("#square"+i).find('.squareButton').data("square", squares[i][0]);
        *// the [0] block of the array is a class filler*
        $("#square"+i).find('.squareButton').data("nameplate", squares[i][1]);
        *// the [1] block of the array is the celebrity's name*
        $("#square"+i).find('.nameplate').html(squares[i][1]);
    }
});

var square0Value = "";
    var square1Value = "";
    var square2Value = "";
    var square3Value = "";
    var square4Value = "";
    var square5Value = "";
    var square6Value = "";
    var square7Value = "";
    var square8Value = "";

    var squareClass = "";
    var squareName = "";
    var squareXO = "";
    var squareId = "";

    $('#squareModal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget);
      squareClass = button.data('square');
      squareName = button.data('nameplate');
      squareXO = button.data('xo');
      squareId = button.data('id');
      console.log(squareId);

      var modal = $(this)
      modal.find('.modal-body').addClass(squareClass);
      modal.find('.modal-body .nameplate').html(squareName);
      modal.find('.modal-body .xo').html(squareXO);
    })

    $('#squareModal').on('hidden.bs.modal', function (event) {
        var modal = $(this);
        modal.find('.modal-body').removeClass(squareClass);
        checkWin();
    });

    function clickX(){
        $(eval(squareId+'Value')).val("X");
        $(eval(squareId)).addClass('selected');
        $(eval(squareId)).find(".squareButton").data("xo", "X");
        $(eval(squareId)).find(".xo").html("X");
    }

    function clickO(){
        $(eval(squareId)).addClass('selected');
        $(eval(squareId+'Value')).val("O");
        $(eval(squareId)).find(".squareButton").data("xo", "O");
        $(eval(squareId)).find(".xo").html("O");
    }

    $("#modalX").on("click", function(e){
        e.preventDefault();
        clickX();
    });

    $("#modalO").on("click", function(e){
        e.preventDefault();
        clickO();
    });

function checkWin() {
    for (i = 0; i < 9; i++) { 
        console.log("Square"+i+": " + eval('square'+[i]+'Value'));
    }

    checkWinX();
    checkWinO();
    if (square0Value != "" && square1Value != "" && square2Value != "" && square3Value != "" && square4Value != "" && square5Value != "" && square6Value != "" && square7Value != "" && square8Value != ""){
        checkBoardFull();
    }
}

The issue lies in the clickX() and clickO() functions where I am trying to set the value of the (eval(squareId+’Value’)) as the X or the O value that is needed. I want to make this as dynamic as possible so don’t have to write a function for every modal.

How to solve:

Not sure why you are using eval.

$("#"+squareId).addClass()

may be enough

###

Here would be my suggestion.

var button = $(event.relatedTarget);

If I am reading this right, that is the button that was clicked that caused the modal to show. If that is the case, then I believe it is a far assumption that only one modal can show at a time. If that is true, then what you can do is make that variable scoped higher, not within that handler.

What does that do for you? Well, if you do that, then you can use that element within your clickX and clickY. For instance…

    function clickX(){
        button.data('xo', 'X');
        button.find('.xo').html('X');
    }

I’m unclear what the others are referencing, but if you have the button then you have access to finding it’s nested children or looking for parent elements if you need to find them.

###

So yeah… rebuilding my global Square Values into an array was a MUCH easier way of organizing things… sorry everyone.

Leave a Reply

Your email address will not be published. Required fields are marked *