Question

我正在尝试学习Javascript，目前我正在使用AddEventListener。

我要做的是添加一个新行，到目前为止它可以正常工作。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .colorOrange {
            background-color: orange;
        }

        .colorBlue {
            background-color: blue;
        }

        .colorYellow {
            background-color: yellow;
        }

        .colorGray {
            background-color: gray;
        }

        .colorRed {
            background-color: red;
        }

        .colorGreen {
            background-color: green;
        }

        .colorWhite {
            background-color: white;
        }

        #main {
            margin: 0 auto;
            width: 325px;
            text-align: center;
            background-color: gray;
        }

        .row {
            width: 300px;
            padding: 10px;
            border: 1px solid black;
            display: block;
        }

        .hideButton, .mainText, .deleteButton {
            margin: 0 auto;
            padding: 10px;
            border: 1px solid black;
            display: inline;
        }
        .btn {

        }
    </style>
</head>
<body>


    <div id="main">
        <div class="AddBtn btn">Add</div>
        <input type="text" id="txtBox" name="text till ruta" />

    </div>
    <script>
        var rownr = 0;

        function addListeners() {
            var addButton = document.getElementsByClassName('AddBtn');
            for (var i = 0; i < addButton.length; i++) {
                var addBtn = addButton[i];
                addBtn.addEventListener('click', function () {
                    var elBtn = event.srcElement;
                    var valueBtn = elBtn.textContent;
                    alert(valueBtn);

                    hideOrShow();
                    addRow();

                    function addRow() {
                        switch (valueBtn) {
                            case "Add":

                                var input = document.getElementById('txtBox').value;
                                rownr++;

                                var div = document.createElement('div');
                                div.className = "row";
                                document.getElementById("main").appendChild(div);

                                var div2 = document.createElement('div');
                                div2.className = "hideButton colorGreen";
                                var tx = document.createTextNode("<");
                                div2.appendChild(tx);
                                div2.addEventListener('click', hideOrShow, false);
                                div.appendChild(div2);

                                var div3 = document.createElement("div");
                                if (input.toLowerCase() == "red") {
                                    div3.className = "mainText colorRed";
                                }
                                else if (input.toLowerCase() == "orange") {
                                    div3.className = "mainText colorOrange";
                                }
                                else if (input.toLowerCase() == "blue") {
                                    div3.className = "mainText colorBlue";
                                }
                                else if (input.toLowerCase() == "yellow") {
                                    div3.className = "mainText colorYellow";
                                }
                                else if (input.toLowerCase() == "gray") {
                                    div3.className = "mainText colorGray";
                                } else {
                                    div3.className = "mainText colorWhite";
                                }
                                tx = document.createTextNode(rownr + " " + input);
                                div3.appendChild(tx);
                                div.appendChild(div3);

                                var div4 = document.createElement("div");
                                div4.className = "deleteButton colorRed";
                                tx = document.createTextNode("X");
                                div4.appendChild(tx);
                                //div4.addEventListener('click', deleBtn, false);
                                div.appendChild(div4);

                                var linebreak = document.createElement("br");
                                div.appendChild(linebreak);
                            default:
                        }
                    }

到目前为止，一切都按照我的意愿行事。但是当我点击“＆lt;”它会进入这个函数并找到hideButton类的所有标签。第一次点击它将找不到任何东西，但第二次它会找到“＆lt;”将弹出值并显示一个警告窗口并显示该值。这是我的地方迷路了，不能让它上班。当你第三次点击它时循环或任何调用它 - 无论如何它将显示警报窗口2次和
然后，如果你重复相同的点击它将做同样的事情3次，所以它去。

                    function hideOrShow() {
                        var hideButton = document.getElementsByClassName('hideButton');
                        for (var j = 0; j < hideButton.length; j++) {
                            hideBtn = hideButton[j];
                            hideBtn.addEventListener('click', function () {
                                var hideElBtn = event.srcElement;
                                var valueHideBtn = hideElBtn.textContent;
                                alert(valueHideBtn);
                            }, false);
                        }
                    }
                }, false);
            }
        } 
        window.onload = addListeners;
    </script>
</body>
</html>

这项练习的目标是

单击“添加”按钮时，从输入字段添加文本并将该文本添加到新行。
和“＆lt;”将该行隐藏并将其更改为“＆gt;”再次展示
和“X”只删除该行。

但我需要帮助的是找到我上面提到的价值部分。

Answer 1

这是我对你的javascript的修改。我在你的评论中解释了我的解决方案，但如果说明的话可能会更清楚。

在addListeners函数中，我删除了hideOrShow调用，因为它不应该在添加按钮中调用。

接下来，我删除了hideOrShow方法中的for循环，因为你真的只是在调用者之后。我还使用与该元素上已有事件侦听器相同的方法删除了addEventListener调用，因此无需再添加一个。

    var rownr = 0;
    function addListeners() {
        var addButton = document.getElementsByClassName('AddBtn');
        for (var i = 0; i < addButton.length; i++) {
            var addBtn = addButton[i];
            addBtn.addEventListener('click', function () {
                var elBtn = event.srcElement;
                var valueBtn = elBtn.textContent;
                alert(valueBtn);

                //hideOrShow();
                addRow();

                function addRow() {
                    switch (valueBtn) {
                        case "Add":

                            var input = document.getElementById('txtBox').value;
                            rownr++;

                            var div = document.createElement('div');
                            div.className = "row";
                            document.getElementById("main").appendChild(div);

                            var div2 = document.createElement('div');
                            div2.className = "hideButton colorGreen";
                            var tx = document.createTextNode("<");
                            div2.appendChild(tx);
                            div2.addEventListener('click', hideOrShow, false);
                            div.appendChild(div2);
                            var div3 = document.createElement("div");
                            if (input.toLowerCase() == "red") {
                                div3.className = "mainText colorRed";
                            }
                            else if (input.toLowerCase() == "orange") {
                                div3.className = "mainText colorOrange";
                            }
                            else if (input.toLowerCase() == "blue") {
                                div3.className = "mainText colorBlue";
                            }
                            else if (input.toLowerCase() == "yellow") {
                                div3.className = "mainText colorYellow";
                            }
                            else if (input.toLowerCase() == "gray") {
                                div3.className = "mainText colorGray";
                            } else {
                                div3.className = "mainText colorWhite";
                            }
                            tx = document.createTextNode(rownr + " " + input);
                            div3.appendChild(tx);
                            div.appendChild(div3);

                            var div4 = document.createElement("div");
                            div4.className = "deleteButton colorRed";
                            tx = document.createTextNode("X");
                            div4.appendChild(tx);
                            //div4.addEventListener('click', deleBtn, false);
                            div.appendChild(div4);

                            var linebreak = document.createElement("br");
                            div.appendChild(linebreak);
                        default:
                    }
                }
               function hideOrShow() {
                    var hideButton = document.getElementsByClassName('hideButton');
                    var hideElBtn = event.srcElement;
                    var valueHideBtn = hideElBtn.textContent;
                    alert(valueHideBtn);
                }
            }, false);
        }
    } 
    window.onload = addListeners;

eventlistener javascript问题

1 个答案: