How to change one grid in HTML and color one square-CodePudding

I have one problem and can't solve it. I have to make one game in HTML, CSS and JS. When the human input via text box one number I have grid and I have to show one picture in one single square and make the square green. But I can't do that, I searched everywhere but can't find anything. Can you help me? I will be very thankfull! Have a good day! This is my script for grid and under this is my grid in HTML.

.grid-container {
  display: inline-grid;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  grid-template-columns: auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto auto;
  background-color: #778899;
  padding: 0px;
  margin-left:15px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 45px 45px;
  font-size: 30px;
  text-align: center;
}

<div  id="grid">
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

You may need to elaborate, because I am not 100% sure what you are trying to accomplish here. Where is your input, and how does it interact with the grid?

If you want to alter a particular grid cell within the entire grid, you can add a click listener to the grid and check if the target is a cell.

const handleCellClick = (e) => {
  if (e.target.classList.contains('grid-item')) {
    e.target.classList.toggle('grid-item-active');
  }
}

document.querySelector('.grid-container')
  .addEventListener('click', handleCellClick);

.grid-container {
  display: inline-grid;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  grid-template-columns: auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto auto;
  background-color: #778899;
  padding: 0px;
  margin-left:15px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 15px 15px;
  font-size: 10px;
  text-align: center;
}
.grid-item-active {
  background: #0F0;
}

<div  id="grid">
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>  
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

Here's how I interpreted your question, showing how to take an input and map the number to the associated cell.

document.querySelector('.numinput-btn').addEventListener('click', e => {
  let num = document.querySelector('.numinput').value
  // reset the grid and set the on state for the number given
  document.querySelectorAll('.grid-item').forEach((el, index) => {
    if (index == num - 1) el.classList.add('onstate');
    else el.classList.remove('onstate');
  })
})

.grid-container {
  display: inline-grid;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  grid-template-columns: auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto auto;
  background-color: #778899;
  padding: 0px;
  margin-left: 15px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 45px 45px;
  font-size: 30px;
  text-align: center;
}

.onstate {
  background: green;
}

<div align='center'>
  <input type='number' class='numinput' /> <button class='numinput-btn'>find</button>
</div>
<hr>
<div  id="grid">
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>