JavaScript не добавляет / удаляет div в установленном порядке

Question

Я работаю с JavaScript и у меня возникают проблемы с парой циклов for для определенного значения.

При увеличении значения ползунка количество изображений увеличивается на единицу, и наоборот, когда его значение увеличивается.понижена.Однако, по причине, в которой я не уверен, он удалит одно из изображений, когда ползунок увеличен с 9 до 10, и добавит один, когда он уменьшен с 10 до 9. Эта проблема не встречается больше нигде вползунок, поэтому я не уверен, что происходит.

Вот код.Используемое изображение не прикреплено, но отсутствующее изображение favicon выполняет ту же работу.

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var prevnumb = 0;
var num = 2

var numberofdivs = 0;
output.innerHTML = slider.value;

slider.oninput = function() {
  prevnum = num;
  output.innerHTML = this.value;
  num = this.value;
  var newnum = num;
  var newprevnum = prevnum;
  console.log(prevnum, num);
  if (prevnum > num) {

    for (newnum; newprevnum > newnum; newnum++) {

      var element = document.getElementById("id");
      element.parentNode.removeChild(element);

    }


  } else if (num > prevnum) {

    for (newprevnum; newnum > newprevnum; newprevnum++) {

      var picpol = document.createElement("img");
      picpol.src = "polee.png";
      picpol.setAttribute("id", "id");
      picpol.setAttribute("class", "polio");
      document.getElementById("basecontainer").appendChild(picpol);
      console.log(picpol);

    }

  } else {

    console.log("no change");

  }
}

body {
  text-align: center;
}

#basecustom {
  text-align: center;
}

.polio {
  margin: none;
  padding: none;
}

Base Customization

<br>
<br>

<div id="basecustom">


  Select your amount of pics
  <input type="range" min="2" max="25" value="2" id="myRange">
  <p>Value: <span id="demo"></span></p>

  <div id="valcont"></div>


  <div id="basecontainer">

    <img class="polioo" src="polee.png" id="id"><img class="polioo" src="polee.png" id="id">

  </div>


</div>

Answer 1

измените num = this.value; на num = parseInt(this.value,10); в исходном коде, num будет строкой.поэтому, когда он увеличивается до 10, вы получите строку «10».И prevnum это «9».И if (prevnum > num) { будет правдой.

Answer 2

Вы пропустили приведение значения к int.По умолчанию это строка.num = parseInt(this.value);

Вышеуказанное исправит вашу проблему.

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var prevnumb = 0;
var num = 2

var numberofdivs = 0;
output.innerHTML = slider.value;

slider.oninput = function() {
  prevnum = num;
  output.innerHTML = this.value;
  num = parseInt(this.value);
  var newnum = num;
  var newprevnum = prevnum;
  console.log(prevnum, num);
  if (prevnum > num) {

    for (newnum; newprevnum > newnum; newnum++) {

      var element = document.getElementById("id");
      element.parentNode.removeChild(element);

    }


  } else if (num > prevnum) {

    for (newprevnum; newnum > newprevnum; newprevnum++) {

      var picpol = document.createElement("img");
      picpol.src = "https://www.vyapin.com/blog/wp-content/uploads/2012/07/bullet_04-1.gif";
      picpol.setAttribute("id", "id");
      picpol.setAttribute("class", "polio");
      document.getElementById("basecontainer").appendChild(picpol);
      console.log(picpol);

    }

  } else {

    console.log("no change");

  }
}

body {
  text-align: center;
}

#basecustom {
  text-align: center;
}

.polio {
  margin: none;
  padding: none;
}

Base Customization

<br>
<br>

<div id="basecustom">


  Select your amount of pics
  <input type="range" min="2" max="25" value="2" id="myRange">
  <p>Value: <span id="demo"></span></p>

  <div id="valcont"></div>


  <div id="basecontainer">

    <img class="polioo" src="https://www.vyapin.com/blog/wp-content/uploads/2012/07/bullet_04-1.gif" id="id"/><img class="polioo" src="https://www.vyapin.com/blog/wp-content/uploads/2012/07/bullet_04-1.gif" id="id"/>

  </div>


</div>