Блог

Главная - Вопросы по программированию - Как я могу исправить оператор if / else в функции javascript, чтобы запускать все функции при первом нажатии и только одну функцию при каждом нажатии после использования значения?

Как я могу исправить оператор if / else в функции javascript, чтобы запускать все функции при первом нажатии и только одну функцию при каждом нажатии после использования значения?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Итак, у меня есть это приложение, в котором я нажимаю кнопку, и вложенные div отображаются с изображением во внутреннем самом div. текстовая область отслеживает, сколько раз нажата кнопка, и при каждом нажатии вложенные divs остаются, но изображение переключается между исходным изображением и вторым изображением.

Мне нужно, чтобы вложенные div появлялись только при первом щелчке, и после каждого щелчка после этого менялось только изображение, используя значение в текстовом поле, чтобы это произошло, как я сделал с функцией addbutterfly .

в этой функции я взял значение из текстовой области и сделал так, чтобы, если значение равно 1, отображалось изображение, и если это не так, будет отображаться другое.

я не уверен, как заставить это работать для функции, применяемой к кнопке, чтобы, если значение равно 0, создавались divs и начальное изображение, и если оно не равно 0, то запускалась только функция addbutterfly, которая меняла бы изображения взад и вперед.

я попытался использовать самый простой способ, который я мог придумать. который должен был извлекать значение из текстовой области так же, как я делал с функцией addbutterfly, и сделать так, чтобы if value == 0 выполнял все функции, else выполнял только функцию addbutterfly, но она не работает.

прежде чем я добавил, что оператор if / else приложение работало нормально, но добавляло все divs при каждом нажатии. это моя ошибка: «сообщение»: «Неперехваченная ошибка типа: не удается прочитать свойство ‘appendChild’ неопределенного», «filename»: «https://stacksnippets.net/js «, «линено»: 102, «кольно»: 45

 var i = 0;

function runTogether1() {
  const value = parseInt(document.getElementById('id1').value, 10);
  if (value == 0) {
    addDiv();
    addDiv2();
    addDiv3();
    addbutterfly();
    incrementValue();
  } else {
    addbutterfly();
  }
}

function addDiv() {
  var div1 = document.createElement('div');
  div1.classList.add('div1');
  document.body.appendChild(div1);
}

function addDiv2() {
  var div2 = document.createElement('div');
  div2.classList.add('div2');
  document.getElementsByClassName("div1")[i].appendChild(div2);
}

function addDiv3() {
  var div3 = document.createElement('div');
  div3.classList.add('div3');
  document.getElementsByClassName("div2")[i].appendChild(div3);
}

function addbutterfly() {
  var img = document.createElement('img');

  // Get the value of the "textfield"
  const value = parseInt(document.getElementById('id1').value, 10);

  // If the value is even, add "bfly2.gif", otherwhise add "bfly1.gif"
  img.src = value % 2 === 0 ? "bfly2.gif" : "bfly1.gif";
  document.getElementsByClassName("div3")[i].appendChild(img);
  i  ;
}


function incrementValue() {
  var value = parseInt(document.getElementById('id1').value, 10);
  value = isNaN(value) ? 0 : value;
  value  ;
  document.getElementById('id1').value = value;
}  
 .div1 {
  background-color: red;
  margin: 1em;
  height: 500px;
  width: 500px;
  justify-content: center;
  align-items: center;
}

.div2 {
  background-color: yellow;
  height: 300px;
  width: 300px;
}

.div3 {
  background-color: limegreen;
  height: 150px;
  width: 150px;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}  
 <html>

<head>
  <meta charset="utf-8">
  <script src="bflyjs.js" defer></script>
</head>

<body>
  <div class="button">
    <button onclick="runTogether1()"> 
          click to get nested divs
      </button>
    <textarea id="id1"> 
      </textarea>
  </div>
</body>

</html>

Комментарии:

1. Текстовая область не содержится 0 в начале. parseInt() возвращается NaN .

2. итак, могу ли я сделать так, чтобы, если он возвращает NaN, запускалась только первая часть, а если у нее есть значение, запускалась другая часть? я попытался поместить 0 в текстовое поле, как в приведенном ниже решении, но это работает только в первый раз и ничего больше.

3. Да, смотрите Мой ответ.

Ответ №1:

Вам нужно добавить значение textarea в, чтобы прочитать значение по идентификатору.

 var i = 0;

function runTogether1() {
  const value = parseInt(document.getElementById('id1').value, 10);
  if (value == 0) {
    addDiv();
    addDiv2();
    addDiv3();
    addbutterfly();
    incrementValue();
  } else {
    addbutterfly();
  }
}

function addDiv() {
  var div1 = document.createElement('div');
  div1.classList.add('div1');
  document.body.appendChild(div1);
}

function addDiv2() {
  var div2 = document.createElement('div');
  div2.classList.add('div2');
  document.getElementsByClassName("div1")[i].appendChild(div2);
}

function addDiv3() {
  var div3 = document.createElement('div');
  div3.classList.add('div3');
  document.getElementsByClassName("div2")[i].appendChild(div3);
}

function addbutterfly() {
  var img = document.createElement('img');

  // Get the value of the "textfield"
  const value = parseInt(document.getElementById('id1').value, 10);

  // If the value is even, add "bfly2.gif", otherwhise add "bfly1.gif"
  img.src = value % 2 === 0 ? "bfly2.gif" : "bfly1.gif";
  document.getElementsByClassName("div3")[i].appendChild(img);
  i  ;
}


function incrementValue() {
  var value = parseInt(document.getElementById('id1').value, 10);
  value = isNaN(value) ? 0 : value;
  value  ;
  document.getElementById('id1').value = value;
}  
 .div1 {
  background-color: red;
  margin: 1em;
  height: 500px;
  width: 500px;
  justify-content: center;
  align-items: center;
}

.div2 {
  background-color: yellow;
  height: 300px;
  width: 300px;
}

.div3 {
  background-color: limegreen;
  height: 150px;
  width: 150px;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}  
 <html>

<head>
  <meta charset="utf-8">
  <script src="bflyjs.js" defer></script>
</head>

<body>
  <div class="button">
    <button onclick="runTogether1()"> 
              click to get nested divs
          </button>
    <textarea id="id1"> 0
          </textarea>
  </div>
</body>

</html>

Комментарии:

1. Что document.getElementsByClassName("div3")[i] должно быть? Вы добавляете только один div3 элемент, поэтому после увеличения происходит сбой i .

2. спасибо, но это не работает для меня, потому что теперь функция работает, когда есть 0, и все. изображения не меняются местами, и счетчик не обновляется в текстовой области. в худшем месте, чем когда я начинал

Ответ №2:

parseInt(document.getElementById('id1').value, 10) возвращается, NaN потому что текстовая область пуста при запуске скрипта. Так что используйте isNaN() , а не сравнивайте с 0 , как вы делаете в incrementValue() .

 var i = 0;

function runTogether1() {
  const value = parseInt(document.getElementById('id1').value, 10);
  if (isNaN(value)) {
    addDiv();
    addDiv2();
    addDiv3();
    addbutterfly();
    incrementValue();
  } else {
    addbutterfly();
  }
}

function addDiv() {
  var div1 = document.createElement('div');
  div1.classList.add('div1');
  document.body.appendChild(div1);
}

function addDiv2() {
  var div2 = document.createElement('div');
  div2.classList.add('div2');
  document.getElementsByClassName("div1")[i].appendChild(div2);
}

function addDiv3() {
  var div3 = document.createElement('div');
  div3.classList.add('div3');
  document.getElementsByClassName("div2")[i].appendChild(div3);
}

function addbutterfly() {
  var img = document.createElement('img');

  // Get the value of the "textfield"
  const value = parseInt(document.getElementById('id1').value, 10);

  // If the value is even, add "bfly2.gif", otherwhise add "bfly1.gif"
  img.src = value % 2 === 0 ? "bfly2.gif" : "bfly1.gif";
  document.getElementsByClassName("div3")[i].appendChild(img);
  i  ;
}


function incrementValue() {
  var value = parseInt(document.getElementById('id1').value, 10);
  value = isNaN(value) ? 0 : value;
  value  ;
  document.getElementById('id1').value = value;
}  
 .div1 {
  background-color: red;
  margin: 1em;
  height: 500px;
  width: 500px;
  justify-content: center;
  align-items: center;
}

.div2 {
  background-color: yellow;
  height: 300px;
  width: 300px;
}

.div3 {
  background-color: limegreen;
  height: 150px;
  width: 150px;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}  
 <html>

<head>
  <meta charset="utf-8">
  <script src="bflyjs.js" defer></script>
</head>

<body>
  <div class="button">
    <button onclick="runTogether1()"> 
          click to get nested divs
      </button>
    <textarea id="id1"> 
      </textarea>
  </div>
</body>

</html>

Комментарии:

1. благодаря этому я все еще получаю сообщение об ошибке для кликов после первого. изображение никогда не обновляется, ни счетчик. ошибка теперь находится в функции addbutterfly и гласит: Uncaught TypeError: не удается прочитать свойство ‘appendChild’ неопределенного. это была функция, которая ранее работала для обмена изображениями и не путалась со счетчиком.

2. Смотрите мой комментарий выше о document.getElementsByClassName("div3")[i] . Это не работает, когда i это не 0 так. Вы вызываете только addDiv3() в первый раз, поэтому есть только один из этих DIV. Почему вы индексируете его с i помощью?

3. я вижу ваш другой комментарий и догадываюсь, в чем проблема. idk, как вернуться и исправить эти вещи, чтобы связать и работать вместе. мне просто нужно, чтобы divs создавались один раз, чтобы при каждом щелчке изображение менялось местами, а текстовая область вела подсчет.

4. Используйте [0] , чтобы получить DIV, а не [i] .

5. Idk, как я пришел к этому прошлой ночью, но это сработало для обмена изображениями, но это воссоздало бы все вложенные divs с разными изображениями один за другим, и значение textarea все равно будет обновляться. если бы он был четным, были бы созданы вложенные divs и в нем было бы четное изображение, и наоборот, если значение было нечетным.