• Resolved hector0371

    (@hector0371)


    I have a JS code snippet, I added them in “Scripts” and activated them. And then I inserted them in the post via source-code snippet .The page displayed the source code instead of running that code for my content. What is the right way to add JS script then?
    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Shea Bunge

    (@bungeshea)

    You’ll need to add your JavaScript in a content snippet and use the Content block if you want to embed it in a page.

    Script snippets are typically intended for scripts that run in the header or footer of a page, instead of embedded alongside content.

    Thread Starter hector0371

    (@hector0371)

    @bungeshea
    I am appreciated for your timely response. The thing I was trying to add was a three-level dropdown selection field for city address. The codes for dropdown itself can be easily added via content snippet. However, it requires another piece of code to work. This is where I got confused.

    This city-selector originally is composed of three parts:

    1.index.html ,which I can easily add via content block

    <div>
            <fieldset>
               
                <label for="addr-show02">您选择的是:
                    <input type="text" id="addr-show02">
                </label>
                <div id="addr-choice">
                    <ul id="title-wrap">
                        <li value="0">省份</li>
                        <li value="1">城市</li>
                        <li value="2">县区</li>
                    </ul>
                    <div id="show-panel">
                        <ul id="addr-wrap">
                        </ul>
                    </div>
                </div>
                <button type="button" class="btn met2">确定</button>
            </fieldset>
        </div>
    <script src="city.js"></script>

    2.The source code to back up that dropdown

    
    
    var addrShow02 = document.getElementById('addr-show02');  //最终地址显示框
    var titleWrap = document.getElementById('title-wrap').getElementsByTagName('LI');
    var addrWrap = document.getElementById('addr-wrap');   //省市区显示模块
    var btn2 = document.getElementsByClassName('met2')[0];  //确定按钮
    
    var current2 = {
        prov: '',
        city: '',
        country: '',
        provVal: '',
        cityVal: '',
        countryVal: ''
    };
    
    /*自动加载省份列表*/
    window.onload = showProv2();
    
    function showProv2() {
        addrWrap.innerHTML = '';
        /*addrShow02.value = '';*/
        btn2.disabled = true;
        titleWrap[0].className = 'titleSel';
        var len = provice.length;
        for (var i = 0; i < len; i++) {
            var provLi = document.createElement('li');
            provLi.innerText = provice[i]['name'];
            provLi.index = i;
            addrWrap.appendChild(provLi);
        }
    }
    
    /*************************需要给动态生成的li绑定点击事件********************** */
    addrWrap.onclick = function (e) {
        var n;
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (target && target.nodeName == 'LI') {
            /*先判断当前显示区域显示的是省市区的那部分*/
            for (var z = 0; z < 3; z++) {
                if (titleWrap[z].className == 'titleSel')
                    n = z;
            }
            /*显示的处理函数*/
            switch (n) {
                case 0:
                    showCity2(target.index);
                    break;
                case 1:
                    showCountry2(target.index);
                    break;
                case 2:
                    selectCountry(target.index);
                    break;
                default:
                    showProv2();
            }
        }
    };
    
    /*选择省份之后显示该省下所有城市*/
    function showCity2(index) {
        addrWrap.innerHTML = '';
        current2.prov = index;
        current2.provVal = provice[index].name;
        titleWrap[0].className = '';
        titleWrap[1].className = 'titleSel';
        var cityLen = provice[index].city.length;
        for (var j = 0; j < cityLen; j++) {
            var cityLi = document.createElement('li');
            cityLi.innerText = provice[index].city[j].name;
            cityLi.index = j;
            addrWrap.appendChild(cityLi);
        }
    }
    
    /*选择城市之后显示该城市下所有县区*/
    function showCountry2(index) {
        addrWrap.innerHTML = '';
        current2.city = index;
        current2.cityVal = provice[current2.prov].city[index].name;
        titleWrap[1].className = '';
        titleWrap[2].className = 'titleSel';
        var countryLen = provice[current2.prov].city[index].districtAndCounty.length;
        if (countryLen == 0) {
            addrShow02.value = current2.provVal + '-' + current2.cityVal;
        }
        for (var k = 0; k < countryLen; k++) {
            var cityLi = document.createElement('li');
            cityLi.innerText = provice[current2.prov].city[index].districtAndCounty[k];
            cityLi.index = k;
            addrWrap.appendChild(cityLi);
        }
    }
    
    /*选中具体的县区*/
    function selectCountry(index) {
        btn2.disabled = false;
        current2.country = index;
        addrWrap.getElementsByTagName('li')[index].style.backgroundColor = '#23B7E5';
        current2.countryVal = provice[current2.prov].city[current2.city].districtAndCounty[index];
    }
    
    /*点击确定后恢复成初始状态,且将所选地点显示在输入框中*/
    btn2.onclick = function () {
        addrShow02.value = current2.provVal + ' ' + current2.cityVal + ' ' + current2.countryVal;
        addrWrap.getElementsByTagName('li')[current2.country].style.backgroundColor = '';
    };
    
    /*分别点击省市区标题的处理函数*/
    document.getElementById('title-wrap').onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (target && target.nodeName == 'LI') {
            for (var z = 0; z < 3; z++) {
                titleWrap[z].className = '';
            }
            target.className = 'titleSel';
            if (target.value == '0') {
                showProv2();
            } else if (target.value == '1') {
                showCity2(current2.prov);
            } else {
                showCountry2(current2.city);
            }
        }
    };

    3. The js code file containing the list of cities to be selected from

    Can you give me more information on how to implement those three scripts to my page via code snippet to make them whole?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘So how to insert JS code for running not displaying ?’ is closed to new replies.