CODEWITHSUNDEEP
javascriptjquery
Asteria
Asteria

Reputation: 330

Detect location of certain element

Say I have three buttons in a row, with the end one being a 'deadly' button. Is there a way I can click on button 1, and it would tell me that it's 2 elements away from the 'deadly' button? Or click on button 2, which would tell me it's once space away from number 3, the 'deadly' button.

I'm not sure I've explained this very well, so I'll link an example of the setup.

I'm hoping do something similar to the Minesweeper way of detecting the 'mines'.

HTML

<table>
    <tr>
        <td><button id="1">Button 1</button></td>
        <td><button id="2">Button 2</button></td>
        <td><button id="3">Button 3</button></td>
    </tr>
    <tr>
        <td><button id="4">Button 4</button></td>
        <td><button id="deadly">Button 5</button></td>
        <td><button id="6">Button 6</button></td>
    </tr>  
    <tr>
        <td><button id="7">Button 7</button></td>
        <td><button id="8">Button 8</button></td>
        <td><button id="9">Button 9</button></td>
    </tr> 
</table>

I'm currently using JQuery, so any solution that uses it will still work for me.

FIDDLE

Upvotes: 0

Views: 57

Answers (3)

user3593520
user3593520

Reputation: 141

This code randomly determines the deadly square and then checks onclick. First it check the coordinates to see if they match, if not then it determines the distance. Here I simply pass coordinates with the function call. you can dynamicallygrow your table if you want to. The added benefit of this approach is that you cannot just view the source and find out which button holds the "deadly"

<script>
    var DeadlyX = Math.floor((Math.random() * 3) + 1);
    var DeadlyY = Math.floor((Math.random() * 3) + 1);


    function amIDeadly(x, y) {

        var r = "checking";
        if ((x == DeadlyX) && (y == DeadlyY)) {
            r = "found the deadly!";
        }
        else {
            var dx = x - DeadlyX;
            var dy = y - DeadlyY;
            var hyp = dx*dx + dy*dy;
            hyp = Math.sqrt(hyp);
            hyp = Math.floor(hyp);
            r = "you are " + hyp + " from the deadly";
        }
        document.getElementById("infobox").value = r;

    }
</script>
<table>
    <tr>
        <td>
            <button id="1" onclick="amIDeadly(1,1);">Button 1</button>
        </td>
        <td>
            <button id="2" onclick="amIDeadly(1,2);">Button 2</button>
        </td>
        <td>
            <button id="3" onclick="amIDeadly(1,3);">Button 3</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="4" onclick="amIDeadly(2,1);">Button 4</button>
        </td>
        <td>
            <button id="5" onclick="amIDeadly(2,2);">Button 5</button>
        </td>
        <td>
            <button id="6" onclick="amIDeadly(2,3);">Button 6</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="7" onclick="amIDeadly(3,1);">Button 7</button>
        </td>
        <td>
            <button id="8" onclick="amIDeadly(3,2);">Button 8</button>
        </td>
        <td>
            <button id="9" onclick="amIDeadly(3,3);">Button 9</button>
        </td>
    </tr>
</table>
<br/>
<br/>
<input id="infobox" />

Upvotes: 0

Barmar
Barmar

Reputation: 781096

Using jQuery:

$("button").click(function() {
    var myrow = $(this).parent().index();
    var mycol = $(this).index();
    var deadly = $("#deadly");
    var deadly_row = deadly.parent().index();
    var deadly_col = deadly.index();
    var x_dist = Math.abs(mycol - deadly_col);
    var y_dist = Math.abs(myrow - deadly_row);
    // Do what you want with x_dist and y_dist
});

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

At its simplest, you can use the cellIndex property of the <td> element within which the <button> is enclosed:

$('button').click(function(e){
    e.preventDefault();
    var self = $(this),
        cellIndex = self.closest('td').prop('cellIndex'),
        lastCell = self.closest('tr').find('td:last-child').prop('cellIndex'),
        delta = Math.abs(lastCell - cellIndex);
    console.log( delta + (delta === 1 ? ' cell' : ' cells') + ' away from deadly cell');
});

JS Fiddle demo.

References:

Upvotes: 1

Related Questions