Не удается получить инструкцию if для выполнения внутри функции onClick

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть эта функция, которая создает группу элементов внутри упорядоченного списка при нажатии кнопки, все элементы в созданной группе имеют одинаковый идентификатор / временную метку. функция работает нормально до тех пор, пока не появится оператор «if», в котором я проверяю / создаю / отправляю массив идентификаторов. Я не понимаю, почему он не будет выполняться.

Это моя функция JS, извините за длину:

 function spawnSilly() //spawn chapters function
        {
            const timestamp = new Date().getUTCMilliseconds();

            var div = document.createElement("LI"); //creating elements
            var input = document.createElement("INPUT");
            var button = document.createElement("BUTTON");
            var del_button = document.createElement("BUTTON")
            input.setAttribute("type", "text");     //setting attributes
            input.setAttribute("placeholder", "Title");
            input.setAttribute("id", timestamp.toString())
            button.setAttribute("type", "button");
            button.setAttribute("onClick", "redirect()");
            button.setAttribute("id", timestamp.toString())
            button.innerHTML = "Edit";
            div.setAttribute("id", timestamp.toString())
            del_button.setAttribute("id", timestamp.toString())
            del_button.innerHTML = "Delete Chapter";
            del_button.setAttribute("onClick", "removeElement(this.id)")
            div.appendChild(input)      //appending to list
            div.appendChild(button)
            div.appendChild(del_button);
            var chapterNumber = getCount(document.getElementById('spawnList'), false) //setting number of spawn
            var number = $('#spawnList').children(); //fetching number of children in list
             //setting chapter number to string for name attribute in input
            var list = document.getElementById("spawnList")
            list.insertBefore(div, list.childNodes[number]) //inserting one after another
            var newSpawnNumber = string(number   1);  //setting elements class as their spawn number
            input.setAttribute("class", newSpawnNumber)
            button.setAttribute("class", newSpawnNumber)
            div.setAttribute("class", newSpawnNumber)
            del_button.setAttribute("class", newSpawnNumber)
            input.setAttribute("index", newSpawnNumber)
            button.setAttribute("index", newSpawnNumber)
            div.setAttribute("index", newSpawnNumber)
            del_button.setAttribute("index", newSpawnNumber)
            if (typeof idArray !== "undefined")
                {
                    idArray.push("#"   new Date().getUTCMilliseconds().toString())
                    alert("push success")
                }
            else if (typeof idArray == "undefined")
                {
                    idArray = new Array()
                    idArray.push("#"   new Date().getUTCMilliseconds().toString())
                    alert("created new array, push success")
                }
            else
                {
                    alert("error")
                }
            alert("success")
        }

    </script>
  

Если я помещаю предупреждение непосредственно перед оператором if, он выполняется, однако, если я помещаю его после оператора if, он не выполняется, странно.

Это мой HTML:

 <a href="#" onclick="alert(getCount(document.getElementById('spawnList'), false));">Count Spawn</a><br/>
<form action="spawn-title-processing.php" method="post">
  <ol id="spawnList">


  </ol>
  <button type="button" id="spawnbtn" onClick="spawnSilly();">Add </button>
  <button type="button" name="spawnSubmit" onClick="submit_chpt">Save</button>
</form>
  

Это ошибки консоли:

     Uncaught ReferenceError: string is not defined
    at spawnSilly (post_creation.php:162)
    at HTMLButtonElement.onclick (VM786 post_creation.php:197)
spawnSilly @ post_creation.php:162
onclick @ VM786 post_creation.php:197
  

Любая помощь была бы фантастической! 🙂

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

1. Было бы полезно посмотреть, где idArray инициализируется (и что он инициализирован). Возможно, что он инициализирован чем-то иным, чем массив, и так оно !== undefined и есть, и при попытке push() перехода к массиву выдается ошибка.

2. idArray инициализируется через первое порождение группы элементов, через первую итерацию оператора if . поэтому оно должно быть неопределенным, если группы не были созданы, но ни один из операторов if не выполняется. Я также попытался инициализировать idArray как массив, непосредственно предшествующий оператору if, и, похоже, это не работает: (

3. Исправьте инициализацию idArray var idArray = new Array()

4. он инициализируется при первом появлении, инициализация его с каждым появлением приведет к потере цели

5. @akemedis затем определите свой idArray вне функции.

Ответ №1:

вы неправильно проверяете свое условие if undefined. вам нужно изменить следующие строки.

От

  if (idArray !== undefined) {
  

Для

 if (typeof idArray !== "undefined") {
  

От

 } else if (idArray == undefined) {
  

Для

 } else if (typeof idArray == "undefined") {
  

Обновлено:

вам также необходимо изменить эту строку

От

 idArray.push("#"   string(new Date().getUTCMilliseconds()))
  

Для

 idArray.push("#"   new Date().getUTCMilliseconds().toString())
  

 function spawnSilly() //spawn chapters function
{

  var div = document.createElement("LI"); //creating elements
  var input = document.createElement("INPUT");
  var button = document.createElement("BUTTON");
  var del_button = document.createElement("BUTTON")
  input.setAttribute("type", "text"); //setting attributes
  input.setAttribute("placeholder", "Title");
  input.setAttribute("id", "var timestamp = new Date().getUTCMilliseconds();")
  button.setAttribute("type", "button");
  button.setAttribute("onClick", "redirect()");
  button.setAttribute("id", "var timestamp = new Date().getUTCMilliseconds();")
  button.innerHTML = "Edit";
  div.setAttribute("id", "var timestamp = new Date().getUTCMilliseconds();")
  del_button.setAttribute("id", "var timestamp = new Date().getUTCMilliseconds();")
  del_button.innerHTML = "Delete Chapter";
  del_button.setAttribute("onClick", "removeElement(this.id)")
  div.appendChild(input) //appending to list
  div.appendChild(button)
  div.appendChild(del_button);
  var spawnNumber = 10;
  //getCount(document.getElementById('spawnList'), false) //setting number of spawn
  var number = $('#spawnList').children(); //fetching number of children in list
  var stringNumber = String(number) //setting spawn number to string for name attribute in input
  var list = document.getElementById("spawnList")
  list.insertBefore(div, list.childNodes[number]) //inserting one after another
  var newSpawnNumber = spawnNumber   1; //setting elements class as their spawn number
  input.setAttribute("class", newSpawnNumber)
  button.setAttribute("class", newSpawnNumber)
  div.setAttribute("class", newSpawnNumber)
  del_button.setAttribute("class", newSpawnNumber)
  input.setAttribute("index", newSpawnNumber)
  button.setAttribute("index", newSpawnNumber)
  div.setAttribute("index", newSpawnNumber)
  del_button.setAttribute("index", newSpawnNumber)
  if (typeof idArray !== "undefined") {
    idArray.push("#"   new Date().getUTCMilliseconds().toString())
    alert("push success")
  } else if (typeof idArray == "undefined") {
    idArray = new Array()
    idArray.push("#"   new Date().getUTCMilliseconds().toString())
    alert("created new aray, push success")
  } else {
    alert("error")
  }
  alert("success")
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" onclick="alert(getCount(document.getElementById('spawnList'), false));">Count Spawn</a><br/>
<form action="spawn-title-processing.php" method="post">
  <ol id="spawnList">


  </ol>
  <button type="button" id="spawnbtn" onClick="spawnSilly();">Add </button>
  <button type="button" name="spawnSubmit" onClick="submit_chpt">Save</button>
</form>  

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

1. ошибка, о которой вы упомянули в другой функции getCount() , которую вы не добавили в свой запрос

2. Обновлено, ошибка указывает на команду button.innerHTML, однако, когда я удаляю эту команду, она по-прежнему выдает ошибку в строке 103, т. Е. пустая строка, потому что я удалил button.innerHTML, очень запутался

3. Я хочу, чтобы мой так плохо работал, я обновил свой вопрос, он снова выдает ошибку строки, я могу удалить половину функции, и она все равно выдаст случайную ошибку строки в кажущихся случайными строках, я удалил половину функции в качестве теста, и она выдала строкуошибка в пустой строке вне функции, я понятия не имею, что происходит

4. Я скопировал ваш код, и он сработал, запутался, но я рад согласиться с этим, спасибо за помощь 🙂

Ответ №2:

Ваш idArray оператор in if не определен, что должно вызывать ошибку, и на этом программа останавливается.

Для совета лучше сделать ваш код чистым.

Например,

 //spawn chapters function
function spawnSilly() {
  const timestamp = new Date().getUTCMilliseconds();

  var li = document.createElement("LI"); 
  li.setAttribute("id", timestamp)

  var input = document.createElement("INPUT");
  input.setAttribute("type", "text");
  input.setAttribute("placeholder", "Title");
  input.setAttribute("id", timestamp)

  var button = document.createElement("BUTTON");
  button.setAttribute("type", "button");
  button.setAttribute("onClick", "redirect()");
  button.setAttribute("id", timestamp)
  button.innerHTML = "Edit";

  var del_button = document.createElement("BUTTON")
  del_button.setAttribute("id", timestamp)
  del_button.setAttribute("onClick", "removeElement(this.id)")
  del_button.innerHTML = "Delete Chapter";

  //appending to list
  li.appendChild(input)
  li.appendChild(button)
  li.appendChild(del_button);

  // and so on...
}
  

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

1. Я безрезультатно определил его внутри и вне функции: (

Ответ №3:

 window.cn = function(o) { return"undefined" == typeof o || null == o || "" == o.toString().trim()}
  

после этого вы проверяете свою переменную следующим образом

 window.cn(idArray)
  

если значение не находится в idArray, оно возвращает false .