querySelectorAll not working for multiple styling

Question

There are some functions where the div width will be changed by clicking the buttons. I've tried to use querySelectorAll to get the corresponding class for styling the div.

The div should only display one column when the div width is 69% and 30%, the function for .Container is working but the function for .Setting isn't working and I don't know why...

please run the code below for a clearer illustration.

function Desktop() {
  
  var x = document.querySelectorAll(".Container");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.width = "100%";
  }
  
  var y = document.querySelectorAll(".Setting");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.gridTemplateColumns = "repeat(1,minmax(200px,1fr))";
  }
  
}

function Tablet() {
  
  var x = document.querySelectorAll(".Container");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.width = "60%";
  }
  
  var y = document.querySelectorAll(".Setting");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.gridTemplateColumns = "repeat(1,minmax(200px,1fr))";
  }
  
}

function Phone() {
  
  var x = document.querySelectorAll(".Container");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.width = "30%";
  }
  
  var y = document.querySelectorAll(".Setting");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.gridTemplateColumns = "repeat(1,minmax(200px,1fr))";
  }
   
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: grey;
}

.hr {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.Medium {
  margin: 0 15px;
}

.Container {
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 0.9s;
}

.Setting {
  align-items: stretch;
  grid-template-columns: repeat(2,minmax(200px,1fr));
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  display: grid;
  text-align: left;
}

.Content {
  width: 200px;
  height: 120px;
  background-color: blue;
}

<div class="hr">
  <button class="Desktop" onclick="Desktop()">Desktop</button>
  <button class="Medium" onclick="Tablet()">Tablet</button>
  <button class="Full" onclick="Phone()">Phone</button>
</div>
<div class="Container">
  <p>This is Heading</p>
  <p>Some text will appear here</p>
  <div class="Setting">
    <div class="Content"></div>
    <div class="Content"></div>
    <div class="Content"></div>
    <div class="Content"></div>
  </div>
</div>

Answer 1

Basically, you had a typo where you were setting up the item as y but then iterating through it with x.

var y = document.querySelectorAll(".Setting");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.gridTemplateColumns = "repeat(1,minmax(200px,1fr))";
}

However, in fixing that I saw that you could reduce your code and make it easier to work with - reducing the 3 functions down to one and creating a 'settings' object to make things easier going forward, so I did that to demonstrate.

const settings = {
  Desktop: {
    width: "100%",
    gridTemplateColumns: "repeat(1,minmax(200px,1fr))",
    padding: "25px"
  },
  Tablet: {
    width: "60%",
    gridTemplateColumns: "repeat(1,minmax(200px,1fr))",
    padding: "20px"
  },
  Phone: {
    width: "30%",
    gridTemplateColumns: "repeat(1,minmax(200px,1fr))",
    padding: "15px"
  }
}

function resize(which) {
  let x = document.querySelectorAll(".Container");
  for (let i = 0; i < x.length; i++) {
    x[i].style.width = settings[which].width;
    x[i].style.padding = settings[which].padding;
  }
  x = document.querySelectorAll(".Setting");
  for (let i = 0; i < x.length; i++) {
    x[i].style.gridTemplateColumns = settings[which].gridTemplateColumns;
  }
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: grey;
}

.hr {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.Medium {
  margin: 0 15px;
}

.Container {
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 0.9s;
}

.Setting {
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  display: grid;
  text-align: left;
}

.Content {
  width: 200px;
  height: 120px;
  background-color: blue;
}

<div class="hr">
  <button class="Desktop" onclick="resize('Desktop')">Desktop</button>
  <button class="Medium" onclick="resize('Tablet')">Tablet</button>
  <button class="Full" onclick="resize('Phone')">Phone</button>
</div>
<div class="Container">
  <p>This is Heading</p>
  <p>Some text will appear here</p>
  <div class="Setting">
    <div class="Content"></div>
    <div class="Content"></div>
    <div class="Content"></div>
    <div class="Content"></div>
  </div>
</div>