Во-первых, ваш HTML-код недействителен, потому что после </body> ничего не может быть, кроме </html>. Все эти сценарии должны быть перемещены непосредственно перед закрывающим тегом body. Кроме того, недопустимо вкладывать fieldset в p. Вы могли бы сделать это p a div.
Далее count --; должно быть count--;
Неожиданным вводом является пробел после ссылки на переменную count.
И ваша HTML-строка, созданная вручную, нуждается в проверке, поскольку вы вложили двойные кавычки в двойные кавычки и ничего не объединяете после count:
onclick="javascript: removeCourseForm("p' + count + '");">
Это также может привести к той же ошибке, потому что у вас есть завершающий +, но потом нечего его конкатенировать.
Сказав это ... Вы действительно не должны использовать этот подход с самого начала.
Вместо того, чтобы создавать огромную строку связанного HTML (в этом и заключается ваша проблема), просто клонируйте первый набор полей. Теперь, поскольку мы собираемся клонировать, мы хотим отказаться от использования атрибутов id и вместо этого использовать .querySelector() и .querySelectorAll() для поиска элементов, основанных на селекторах CSS.
Вам также следует прекратить использование .getElementsByTagName(), поскольку это влияет на производительность, и вы не заинтересованы в коллекции, которую она все равно возвращает, вы передаете индекс в коллекцию. Вместо этого используйте .querySelector().
Наконец, не используйте встроенные обработчики событий (onclick). Есть ли у вас привязка событий в JavaScript.
См. Комментарии ниже.
Вот рабочий пример.
<!DOCTYPE html>
<html>
<head>
<title>Add a New Course</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.buttonHolder {
text-align: center;
}
</style>
</head>
<body>
<form action="" id="courseForm">
<fieldset>
<legend>Enter course info:</legend>
Course title:
<br>
<input type="text" class="displayName">
<br> Category:
<br>
<select name="categoryDropdown" class="category"></select>
<br> Duration:
<br>
<input type="time" class="duration">
<br> Subcategory:
<br>
<input type="text" class="subcategory">
<br> Description:
<br>
<textarea rows="4" cols="60" class="description"></textarea>
<br> URL:
<br>
<input type="text" id="url1">
<br> ID:
<br>
<input type="text" id="id1">
<br> Table ID:
<br>
<input type="text" id="tableId1">
<br>
<div class="buttonHolder">
<input type="button" value="Submit All" class="submitAll">
<input type="button" value="New Course" class="newCourse">
</div>
</fieldset>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://splm.sharepoint.com/sites/OCB/Shared%20Documents/Testing/js/vkbeautify.js"></script>
<script src="https://splm.sharepoint.com/sites/OCB/Shared%20Documents/Testing/js/MicrosoftAjaxCore.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/4.0/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="https://unpkg.com/sharepointplus@5.1.0/sharepointplus-5.1.js"></script>
<script>
//Get the course form element
var course = document.getElementById("courseForm");
document.querySelector(".submitAll").addEventListener("click", loadXMLDoc_submitFormData);
document.querySelector(".newCourse").addEventListener("click", addCourseForm);
function addCourseForm() {
var firstFS = document.querySelector("fieldset");
//Error checking here, making sure we got courseForm
if (course) {
// >>> **** Clone the current fieldset ***** <<<<
var newFS = firstFS.cloneNode(true);
// Create and configure remove button
var removeBtn = document.createElement("button");
removeBtn.textContent = "Remove Course";
removeBtn.type = "button";
removeBtn.addEventListener("click", function() {
// Call the remove function but pass the fieldset
// that this button is part of
removeCourseForm(this.closest("fieldset"));
});
// Append the new button to the new fieldset
newFS.querySelector("div.buttonHolder").appendChild(removeBtn);
//Appends the new <p> element to the other forms
course.appendChild(newFS);
// ***********************************************
loadXMLDoc_makeCatArray();
}
}
function removeCourseForm(fs) {
fs.remove();
}
function loadXMLDoc_submitFormData() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
submitFormData(this);
}
};
xmlhttp.open("GET", "https://splm.sharepoint.com/sites/OCB/Shared%20Documents/Testing/curriculumdata.xml", true);
xmlhttp.send();
}
function submitFormData(xml) {
var xmlDoc = xml.responseXML;
console.log(xmlDoc);
for (var x = 1; x <= count; x++) {
var p = xmlDoc.getElementsByTagName("course")[1];
var p_prime = p.cloneNode(false);
xmlDoc.querySelector("curriculumdata").appendChild(p_prime);
var br = xmlDoc.createElement("br");
var elements = ["category", "description", "displayName", "duration", "id", "subcategory", "tableId", "url"];
for (var y = 0; y < elements.length; y++) {
console.log(elements[y] + x);
newElement = xmlDoc.createElement(elements[y]);
if (y == 0) {
newText = xmlDoc.createTextNode(document.getElementById(elements[y] + x).text);
} else {
newText = xmlDoc.createTextNode(document.getElementById(elements[y] + x).value);
}
newElement.appendChild(newText);
console.log(newElement);
xmlDoc.querySelectorAll("course")[xmlDoc.getElementsByTagName("course").length - 1].appendChild(newElement);
}
};
var clientContext = new SP.ClientContext('https://splm.sharepoint.com/sites/OCB');
var oList = clientContext.get_web().get_lists().getByTitle('Course List');
var itemCreateInfo = new SP.ListItemCreationInformation();
this.oListItem = oList.addItem(itemCreateInfo);
var documents = new XMLSerializer().serializeToString(xmlDoc.documentElement);
documents = vkbeautify.xml(documents);
oListItem.set_item('xml_data', documents);
oListItem.update();
clientContext.load(oListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
};
function onQuerySucceeded() {
alert('Course successfully added');
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
function loadXMLDoc_makeCatArray() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
catArray(this);
}
};
xmlhttp.open("GET", "https://splm.sharepoint.com/sites/OCB/Shared%20Documents/curriculumdata.xml", true);
xmlhttp.send();
}
function catArray(xml) {
eleArray = [];
var xmlDoc = xml.responseXML;
ele = xmlDoc.getElementsByTagName("course");
for (i = 0; i < ele.length; i++) {
if (!(eleArray.includes(ele[i].querySelector("category").childNodes[0].nodeValue))) {
eleArray.push(ele[i].querySelector("category").childNodes[0].nodeValue);
}
}
var sel = document.querySelector('categoryDropdown')[count - 1];
for (var i = 0; i < eleArray.length; i++) {
var opt = document.createElement('option');
opt.innerHTML = eleArray[i];
opt.value = eleArray[i];
console.log(opt);
sel.appendChild(opt);
}
};
loadXMLDoc_makeCatArray();
</script>
</body>
</html>