未捕獲的ReferenceError：在HTMLDivElement.onclick中未定義doIt

Question

所以我有以下問題。 我在同一行上寫了標題和說明。 我想使用javascript在下一個div中移動描述。 我有多個項目，並且我試圖為每個項目都具有相同的效果，而無需編寫6個函數，每個函數都做錯什么？

function doIt(text) {


        for (var i = 1; i <= 6: i++) {

            if (('panel' + i.toString()) == text) {
                if (document.getElementById('move' + i.toString()).parentElement.getAttribute('id') ==
                    'panel'+i.toString()) {
                    document.getElementById('div'+i.toString()).appendChild(
                        document.getElementById('move' + i.toString())



                    );
                    document.getElementById('div'+i.toString()).insertBefore(
                        document.getElementById('move' + i.toString()), document.getElementById('div'+i.toString()).firstChild);
                    document.getElementById('move' + i.toString()).innerHTML = document.getElementById('move' + i).innerHTML.substr(1);
                } else {

                    document.getElementById('panel' + i.toString()).appendChild(
                        document.getElementById('move' + i.toString()));
                    document.getElementById('move' + i.toString()).innerHTML = '-' + document.getElementById('move' + i.toString()).innerHTML;



                }
            }


        }
    }

這是html代碼的一部分：

<div class="panel-group" id="accordion">
        <div class="panel panel-default" >
            <center>
                <a href="#collapse1" data-toggle="collapse" data-parent="#accordion" style="text-decoration:none; color: black ;">
                    <div id="panel1" class="panel-heading" onclick="doIt(this.id)">

                        <h4 class="panel-title" style="display:inline-block;">

                            President 3
                        </h4>

                        <h6 id="move1" href="#collapse1" data-toggle="collapse" data-parent="#accordion" style="display: inline-block;">-Scurta descriere president 3</h6>

                    </div>

                </a>
            </center>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
            <div class="panel-body">
                <center id="div1">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                </center>
            </div>
        </div>

Answer 1

您有2個錯誤：
1- (var i = 1; i <= 6: i++) => for (var i = 1; i <= 6; i++)語法錯誤
2-js文件未加載

jsFiddle： https ://jsfiddle.net/nqym3s4b/3/

Answer 2

您在javascript代碼中有語法錯誤（for循環）。 首先更正，然后查看下一個問題。

let panels = document.getElementsByClassName('panel-heading');

for (var i = 0; i < panels.length; i++) {
  panels[i].addEventListener('click', doIt, false);
}

另外，請勿使用onclick事件。 嘗試添加事件偵聽器。 jsFiddle 在這里