为了测试我有警报,所以问题似乎出现在警报之前。
它会在
处抛出错误var firstPrevClass= "categClass"+PrevClass;
var newCategory = document.getElementsByClassName(firstPrevClass);
未捕获的TypeError:undefined不是函数
基本上在函数addCategory
中我想创建具有不同类名(动态创建)的动态新div。
之后我想在最后一个类别之后追加新类别。
在函数addField
中,我想在从选择框
在函数getClass
中,我获得了所选的className,因此我可以在所选的div中创建一个新字段。
怎么做?
/*add new category to SelextBox*/
function addCategory() {
var categoryValue = document.getElementById("newCateg").value;
var y = document.getElementById('selectCategory');
var option = document.createElement("option");
var hid = document.getElementById("nextValue").value;
var newClass = "categClass" + hid;
option.setAttribute("class", newClass);
option.value = categoryValue;
option.text = categoryValue;
y.add(option);
var PrevClass = hid-1 ;/*i do this to get the first previous class*/
var firstPrevClass= "categClass"+PrevClass;
alert(newClass);
var newCategory = document.getElementsByClassName(firstPrevClass);
var div = document.createElement('div');
div.setAttribute('class',newClass );
var a = document.createElement('a');
a.setAttribute('class', 'titles');
var input_checkC = document.createElement('input');
input_checkC.setAttribute('type', 'checkbox');
input_checkC.setAttribute('class', 'check');
var textNodeCateg = document.createTextNode(categoryValue);
div.appendChild(a);
div.appendChild(input_checkC);
div.appendChild(textNodeCateg);
var last = newCategory.length;
newCategory[last].appendChild(div);
document.getElementById("nextValue").value++;
alert(newClass);
}
function getClass(sel) {
var x =sel.options[sel.selectedIndex].className;
document.getElementById("submitSelection").value=x;
}
function addField() {
var val = document.getElementById("submitSelection").value;
var existedCategory = document.getElementsByClassName(val);
var fieldValue = document.getElementById("newField").value;
var div = document.createElement('div');
var input_check = document.createElement('input');
input_check.setAttribute('type', 'checkbox');
input_check.setAttribute('class', 'check');
var input = document.createElement('input');
input.setAttribute('type', 'text');
var br = document.createElement('br');
var textnode = document.createTextNode(fieldValue);
div.appendChild(input_check);
div.appendChild(textnode);
div.appendChild(input);
div.appendChild(br);
existedCategory.appendChild(div);
}

<ul>
<li>Προσθέστε το όνομα της νέας κατηγορίας</li>
<p>Ονομα Kατηγορίας:
<label>
<input type="text" id="newCateg" />
</label>
<input type="button" id="addCateg" value="Προσθήκη" onclick=" addCategory()" />
</p>
<p> </p>
<li>Επιλέξετε κατω απο ποια κατηγορία θα ανήκει το νεο πεδίο και εισάγεται το όνομα του νέου πεδίου.</li>
<p>Κατηγορία:</p>
<input type="hidden" value="4" id="nextValue" />
<input type="hidden" value="" id="submitSelection" />
<select id="selectCategory" onchange="getClass(this)">
<option>Επιλογή ...</option>
<option class="categClass1">Εξοδα Κατοικίας</option>
<option class="categClass2">Εξοδα Εκπαίδευσης</option>
<option class="categClass3">Εξοδα Ψηχαγωγίας</option>
</select>
<p>Ονομα πεδίου:
<label>
<input type="text" id="newField" />
<input type="button" value="Προσθήκη" onclick="addField()" />
<br />
</label>
</p>
<div class="class_1">
<p class="titles">
<input type="checkbox" class="catChk1 check" onchange="checkAll(subCheck1,subChks)" />Εξοδα Kατοικιας</p>
<div class="field">
<input type="checkbox" class="subCheck1 check" />Ενοίκιο
<input type="text" />
</br>
</div>
<div class="field">
<input type="checkbox" class="subCheck1 check" />Θέρμανση
<input type="text" />
</br>
</div>
<div class="field">
<input type="checkbox" class="subCheck1 check" />Διάφορα Yλικά
<input type="text" />
</br>
</div>
<div class="class_2">
<p class="titles">
<input type="checkbox" class="check" onchange="checkAll(this)" />Εξοδα Εκπαίδευσης παιδιού</p>
<div class="field">
<input type="checkbox" class="check" />Φροντιστήρια
<input type="text" />
</br>
</div>
<div class="field">
<input type="checkbox" class="check" />Βιβλία
<input type="text" />
</br>
</div>
<div class="field">
<input type="checkbox" class="check" />Σχολική Υλη
<input type="text" />
</br>
</div>
<div class="class_3">
<p class="titles">
<input type="checkbox" class="check chk" onchange="checkAll(this)" />Για Ψυχαγωγία</p>
<div class="field">
<input type="checkbox" class="check" />
<label>Θέατρο</label>
<input type="text" />
</br>
</div>
<div class="field">
<input type="checkbox" class="check" />
<label>Ψάρεμα</label>
<input type="text" />
</br>
</div>
<div class="field">
<input type="checkbox" class="check" />
<label>Γήπεδο</label>
<input type="text" />
</br>
</div>
&#13;