js realize hide and show html

In general, our aim is at the click of a button triggers the display of different styles;

1. First we need to clear the default style of the display, followed by the need to find a style click a button to be presented;

  For the default display style: we need to set the style = "display: block" 

  

  <div class="col-sm-6 deleteType-item" style="display: block">
                    <label class="col-sm-4 control-label"></label>
                    <button class="btn btn-primary" onclick="deleteCourse()">删除课程</button>
                </div>
                <div class="col-sm-6 addType-item" style="display: none">
                    <label class="col-sm-4 control-label"></label>
                    <button class="btn btn-primary" onclick="addCourse()">增加课程</button>
                </div>

　　

  For the need to hide the style: the need to set the style = "display: none"

  Different types and different set of class labels, such as deleting curriculum is deleteType-item, increase curriculum is addType-item

2. Secondly, needs to show different styles under different conditions, in order to achieve the following example, we need to select the time frame changes, to determine in the end is added or deleted class lesson, onchange = "permissionChange ()" method positive It helps us to change the style;

 <div class="col-sm-4">
                        <select class="form-control" id="permissionType" onchange="permissionChange()"> 
                            <option value="delete">删课</option>
                            <option value="add">加课</option>
                        </select>
                    </div>

html 3. js code displayed by the control, we obtain the id select the block, and acquires the corresponding value, obtained in accordance with the corresponding node 1 className. Then each node traversal list, modify

function permissionChange() {
    var perObj = document.getElementById('permissionType');
    var perOption = perObj.options[perObj.selectedIndex] || null;
    var addItems = document.getElementsByClassName('addType-item');
    var deleteItems = document.getElementsByClassName('deleteType-item');
    if (perOption.value === 'delete') {
        for (var i = 0; i < deleteItems.length; i++) {
            deleteItems[i].style.display = 'block';
        }
        for (var i = 0; i < addItems.length; i++) {
            addItems[i].style.display = 'none';
        }

    } else {
        for (var i = 0; i < deleteItems.length; i++) {
            deleteItems[i].style.display = 'none';
        }
        for (var i = 0; i < addItems.length; i++) {
            addItems[i].style.display = 'block';
        }
    }

}