Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

JavaScript An array in a loop king of thing...

Norkayak

Norkayak

New Coder
Hi guys;

I'm trying to do this thing:
Let say I have an array of 12 elements; each containing an integer.
I want to call a function. That function would get as parameter the place in the array. Then the function would read the value of this element in the array; let's call it 'nTime'. Set it to zero. And will increment by 1 the value contained in the next cells of the array for the 'nTime' given. Also if the next cell which value should be incremented is > to the number cells in the array then that value should be inscribed in the first cell of the array and so on. In a circle.

I'm trying to do that. I haven't fully tested it yet but I think I'm trying to reinvent the wheel when a certainly easier solution exists:

Here is what I've done so far:

Code: 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Les Jeux Cornichons </title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <style>
        table, th, td, tr {
          border: 2px solid;
          text-align: center;
          padding: 10px;
          cursor: pointer;
        }
        </style>
</head>

<body>
    <table style="width: 70%; margin-top: 10px; margin-left: 15%; font-size: 1.8em;">
        <tr style="text-align:center" >
            <th id="cell12" >4</th>
            <th id="cell11" >4</th>
            <th id="cell10" >4</th>
            <th id="cell9" >4</th>
            <th id="cell8" >4</th>
            <th id="cell7" >4</th>
        </tr>
        <tr>
            <th id="cell1" onclick="shiftCells(1)">4</th>
            <th id="cell2" onclick="shiftCells(2)">4</th>
            <th id="cell3" onclick="shiftCells(3)">4</th>
            <th id="cell4" onclick="shiftCells(4)">4</th>
            <th id="cell5" onclick="shiftCells(5)">4</th>
            <th id="cell6" onclick="shiftCells(6)">4</th>
        </tr>
    </table>
</body>

<script>

class classGroup {
        constructor(nbrPeas, occupied) {
            this.nbrPeas = 4;
            this.occupied = 'false';
            this.isFull = 'false';
        }
    }

    var myArray = [];

    for (var i = 1; i < 13; i++) {
        myArray[i] = new classGroup(4, 'false', 'false');
    }

    function shiftCells(callingCell){
        var byID
        var startLoop = callingCell + 1;
        var stopLoop = callingCell + myArray[callingCell].nbrPeas + 1;

        myArray[callingCell].nbrPeas = 0;


        for (var i = startLoop; i < stopLoop; i++) {
            if(myArray[i].isFull === 'false'){
                if (i < 13){
                    if ((myArray[i].nbrPeas + 1 < 12)){
                        myArray[i].nbrPeas = myArray[i].nbrPeas + 1;
                    }else{
                        myArray[i].isFull = 'true';
                        spillOverflow(i);
                        stopLoop = stopLoop + 1;
                    }
                }else{
                    myArray[i -12].nbrPeas = myArray[i -12].nbrPeas + 1;
                    spillOverflow(i);
                    stopLoop = stopLoop + 1;
                }
            }else{
                stopLoop = stopLoop + 1;
            }
        }

        for (var i = 1; i < 13; i++) {
            byID = 'cell' + i;
            document.getElementById(byID).innerText = myArray[i].nbrPeas;
            console.log(myArray[i].nbrPeas);
        }
    }

    function spillOverflow(cellNbr){
        var freeFound = false;
        var cellIncr = cellNbr + 1;

        while(freeFound === false){
            if(myArray[cellIncr].isFull === 'false'){
                freeFound = true;
                myArray[cellIncr].isFull = 'true';
            }else{
                cellIncr = cellIncr + 1;
            }
        }
    }
</script>

Working on the logic now only. Clicking on any cells at the bottom should work and gives expected values...

I hope I explain clearly enough 🙂
 
Last edited:
Sort by date Sort by votes
Hey there, some examples would be helpful.

From what I understand, you want to do something like this:
Original array: [7, 13, 10, 18, 5, 11, 12, 15, 2, 20, 17, 14]
After calling function with 4 as parameter:
nTime: 5
Array: [7, 13, 10, 18, 0, 12, 13, 16, 3, 21, 17, 14] (increment value of next 5 (i.e. nTime) elements)
 
Upvote 0 Downvote
Johna said:
Hey there, some examples would be helpful.

From what I understand, you want to do something like this:
Original array: [7, 13, 10, 18, 5, 11, 12, 15, 2, 20, 17, 14]
After calling function with 4 as parameter:
nTime: 5
Array: [7, 13, 10, 18, 0, 12, 13, 16, 3, 21, 17, 14] (increment value of next 5 (i.e. nTime) elements)
Click to expand...

Ooops sorry; yes you got it. It's the way it should go. And it function so far but it seems a bit of a barbarian way to do it; is there not an easier cleaner way to do that?
 
Upvote 0 Downvote
Unlike Bono I found what i was looking for found on another forum. I post it here so it may profit others:

Code: 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Les Jeux Cornichons</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    table, th, td, tr {
      border: 2px solid;
      text-align: center;
      padding: 10px;
      cursor: pointer;
    }
    #gameBoard {
      width: 70%;
      margin-top: 10px;
      margin-left: 15%;
      font-size: 1.8em;
    }
  </style>
</head>
<body>
  <table id="gameBoard">
    <tr id="topRow">
      <td data-cell-id="12">4</td>
      <td data-cell-id="11">4</td>
      <td data-cell-id="10">4</td>
      <td data-cell-id="9">4</td>
      <td data-cell-id="8">4</td>
      <td data-cell-id="7">4</td>
    </tr>
    <tr id="bottomRow">
      <td data-cell-id="1">4</td>
      <td data-cell-id="2">4</td>
      <td data-cell-id="3">4</td>
      <td data-cell-id="4">4</td>
      <td data-cell-id="5">4</td>
      <td data-cell-id="6">4</td>
    </tr>
  </table>

  <script>
    // Add event listeners to the bottom row cells
    document.querySelectorAll('#bottomRow td').forEach(cell => {
        cell.addEventListener('click', () => {
            let cellId = Number(cell.getAttribute('data-cell-id'));
            let seeds = Number(cell.innerText);
            cell.innerText = 0;

            while (seeds > 0) {
            cellId = (cellId % 12) + 1; // Wrap around if greater than 12
            const nextCell = document.querySelector('[data-cell-id="' + cellId + '"]');

            // Skip cells if adding a seed would exceed 12
            if (nextCell && Number(nextCell.innerText) < 12) {
                nextCell.innerText = Number(nextCell.innerText) + 1;
                seeds--;
            }
            }
        });
    });

    document.querySelectorAll('#topRow td').forEach(cell => {
        cell.addEventListener('click', () => {
            let cellId = Number(cell.getAttribute('data-cell-id'));
            let seeds = Number(cell.innerText);
            cell.innerText = 0;

            while (seeds > 0) {
            cellId = (cellId % 12) + 1; // Wrap around if greater than 12
            const nextCell = document.querySelector('[data-cell-id="' + cellId + '"]');

            // Skip cells if adding a seed would exceed 12
            if (nextCell && Number(nextCell.innerText) < 12) {
                nextCell.innerText = Number(nextCell.innerText) + 1;
                seeds--;
            }
            }
        });
    });
  </script>
</body>
</html>
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom