Counter Keeps Resetting in HTML/CSS

Counter keeps resetting in HTML/CSS

You need to move the reset from the pseudo element. Also, you can reformat the counter-reset on the body to include all of them in one statement.

body {  counter-reset: chapter section subsection;}
h1.chapter::before {  counter-increment: chapter;  content: "Chapter " counter(chapter) ": ";}
h1.chapter {  counter-reset: section;}
h2.section::before {  counter-increment: section;  content: "Section " counter(chapter) "." counter(section) ": ";}
h2.section {  counter-reset: subsection;}
h3.subsection::before {  counter-increment: subsection;  content: "Subsection " counter(chapter) "." counter(section) "." counter(subsection) ": ";}

<h1 class="chapter"> The first chapter</h1><h2 class="section"> The first section </h2><h2 class="section"> The second section </h2><h3 class="subsection"> The first subsection </h3><h3 class="subsection"> The second subsection </h3><h1 class="chapter"> The second chapter</h1><h2 class="section"> The second chapter's first section</h2><h3 class="subsection"> The second chapter's first subsection </h3>

Why does only one counter work when both are specified in body?

It's because you are declaring two counter-reset on the body tag. It will automatically default to the second one. In order to have two (or more) counter-resets, use one counter-reset with a space separated list:

body{
counter-reset: testA testB;
}

p::before{
counter-increment: testA;
content: counter(testA) ": ";
}

span::before{
counter-increment: testB;
content: counter(testB) ": ";
}

<p>P one</p>
<p>P two</p>
<span>Span one</span>
<span>Span two</span>

How do I stop CSS stylesheet from resetting to default after refreshing the page?

Just put your theme css in a css file and pass it to the function,
On page load the if (localStorage.getItem("theme") != "") checks if theme has been set..
Here you have an example:

    if (localStorage.getItem("theme") != "") {        loadcssfile(localStorage.getItem("theme"));      }
      function loadcssfile(filename) {        if (filename != "") {          localStorage.setItem("theme", filename);        }                var fileref = document.createElement("link");        fileref.setAttribute("rel", "stylesheet");        fileref.setAttribute("type", "text/css");        fileref.setAttribute("href", filename);
        if (typeof fileref != "undefined")          document.getElementsByTagName("head")[0].appendChild(fileref);      }

  <div onclick="loadcssfile('css/pink.css')" id="pink">      Pink    </div>    <div      onclick="loadcssfile('css/blue.css')" id="blue">      Blue    </div>

Automatic Numbering not incrementing

You need to set counter-reset to parent .grid, also no need to set 0

Note you can improve your grid-template-columns: auto auto auto, to grid-template-columns: repeat(3, auto)

* {
  box-sizing: border-box;
  list-style: none;
}

.grid {
  background-color: #ddd;
  padding: 20px;
  width: 800px;
  height: 400px;
  margin: 20px auto;
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: auto 1fr;
  gap: 10px;
  counter-reset: Element;
}

.grid div {
  padding: 20px;
  background-color: darkgreen;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style-type: none;
}

.grid div::before {
  counter-increment: Element;
  content: "Element " counter(Element);
  color: white;
  justify-content: center;
  display: flex;
  align-items: center;
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

How do you conditionally reset a counter in JavaScript

Well as I understand, the thumbsUp counter needs to be set to 0 when the thumbsDown button is clicked. The thumbsDown counter needs to be set to 0 when the thumbsUp button is clicked. This can be done by modifying the upClick and downClick buttons so they work as follows:

function upClick(idx) {
  GV_MOVIES[idx].thumbsUp++;
  GV_MOVIES[idx].thumbsDown = 0;
  display();
}

function downClick(idx) {
  GV_MOVIES[idx].thumbsDown++;
  GV_MOVIES[idx].thumbsUp = 0;
  display();
}

---

Related Topics