获取动态类名(JS)

时间:2015-01-30 08:56:44

标签: javascript html javascript-events getelementsbyclassname

为了测试我有警报,所以问题似乎出现在警报之前。

它会在

处抛出错误
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>&nbsp;</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;
&#13;
&#13;

0 个答案:

没有答案