Changing the id of an element

Asked

Viewed 179 times

-1

I created a table with buttons where each one receives a different id, all have the same prefix changing only the end, which goes from 0 to 99. 

const cellArray = []
let cellWidth = 10
let cellHeight = 10
var isClicked = false

function start() {
    createCellsDataStructure()
    renderCells()
}

function createCellsDataStructure() {
    const numberOfCells = cellWidth * cellHeight

    for (let i = 0; i < numberOfCells; i++) {
        cellArray[i] = 0
    }
}

function cellsProgation() {

}

function changeColor(element){
    var id = element.id

    document.getElementById(id).style.background = "purple"

    neighbor(id)
}

function neighbor(id) {
    document.getElementById(id-11).style.background = "#999"
    document.getElementById(id-10).style.background = "#999"
    document.getElementById(id-9).style.background = "#999"
    document.getElementById(id-1).style.background = "#999"
    //document.getElementById(id+1).style.background = "#999"
    //document.getElementById(id+9).style.background = "#999"
    //document.getElementById(id+10).style.background = "#999"
    //document.getElementById(id+11).style.background = "#999"
    
}

function renderCells() {
    let html = '<table cellpadding=0 cellsapcing=0>'
    for (let row = 0; row < cellHeight; row++) {
        html += '<tr>'
        
        for (let column = 0; column < cellWidth; column++) {
            var cellIndex = column + (cellWidth * row)
            html += '<td class="cell-index">'
            html += `<button id="${cellIndex}" onClick="changeColor(this)"></button>`
            html += '</td>'
        }


        html += '</tr>'
    }
    html += '</table>'

    document.querySelector('#cellBlock').innerHTML = html
}


start()
<html>
<head>
    <title>Fundamento de Sistemas</title>
    <style>
        td {
            width: 50px;
            height: 50px;
            text-align: center;
            vertical-align: center;
            font-family: monospace;
            font-size: 18px;
            position: relative;
        }

        button {
            font-size: 10px;
            height: inherit;
            width: inherit;
        }
    </style>

</head>
<body>
    <div id="cellBlock"></div>
    <script src="constructor.js"></script>
</body>
</html>

In function neighbor() want to take the index of the button clicked and change it so that you can, through this, know the index of the buttons around you.

Ex: When you click the 55 button, neighbors (44, 45, 46, 54, 56, 64, 65, 66) should change their color. I was able to do in a way that the positions previous to the button I can change, in the case of the example above 44 to 54, but the later ones I can not, because instead of adding the values he is only concatenating the values, example, 55 + 1 returns 551, and not 56.

Aside from neighbor() is the one making a mistake.

javascript

  • You could put the function here to see how it is so far

  • Still having the problem? Id is an HTML property, and HTML cannot distinguish text from numbers. As a result, when you take the id of an element it comes as a string and you know what happens when we use it + with a string. Try using id = parseInt(id) right at the start of the function neighbor.

  • Maaaaaaaaaaaaaaaaaaaaaaaaaaaaannnnoooooo!!! Very obg, gave right agr, vlw msm!!

  • @user140828 passes your comment to reply to me put as answered, vlw by help bro...

1 answer

0

Using jQuery would be something like this:

//Crio a função recebendo o elemento
function cellNeighbor(this) {
  //Pego o valor do atributo id
  let id = $(this).attr("id");
  //Separo a para poder pegar o id, criando um array de string de duas posições
  id = id.split("index-$");
  //Como era um array de string finalmente pego o numero
  id = id[1];
  //Crio os ids dos vizinhos pelo id atual (essa logica pode ser melhorada, foi o 
  //mais fácil que pensei na hora)
  if(id > 3)
    let neighborButtons = [id-4, id-3, id-2, id-1, id+1, id+2, id+3, id+4];
  else
    let neighborButtons = [id+1, id+2, id+3, id+4]; 
  //Crio o for para setar a cor de cada um dos vizinhos
  for(let i=0; i < 8; i++) {
    $("#cell-index-$" + neighborButtons[i]).css("atributo", "valor");
  }
}

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.