Question

我正在练习w3school上的待办事项清单：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_todo

它可以这样显示：

点击添加按钮后，计算机提示：

第124行出现“未捕获的SyntaxError：意外令牌}”错误。

但是第124行上只有<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:android:layout_weight="1" android:orientation="vertical"> <TextView android:id="@+id/textView4" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="TextView" /> <TextView android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="TextView" /> </LinearLayout>标记，因此我不明白为什么会有语法错误。
这是我的整个代码：

</div>

有一个：

第123行上的“未捕获的ReferenceError：未定义newElement”错误

我已经修复了。

Answer 1

您只需将函数名称添加到onclick事件中，如下所示

<span onclick="newElement()" class="bt">Add</span>

而不是

<span onclick="javascript:function newElement()" class="bt">Add</span>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">

            body {
              margin: 0;
              min-width: 250px;
            }
            * {
                box-sizing: border-box;
            }


            ul {
                margin: 0;
                padding: 0;
            }
            ul li{
                cursor: pointer;
                position: relative;
                padding: 12px 8px 12px 40px;
                background: #eee;
                font-size: 18px;
                transition: 0.2s;

                /* make the list items unselectable */
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                 user-select: none;
            }

            ul li:nth-child(odd){
                background: #f9f9f9;
            }

            ul li:hover{
                background: #ddd;
            }

            ul li.checked{
                background: #888;
                color: #fff;
                text-decoration: line-through;
                /*上面是畫斜線~*/
            }

            ul li.checked::before{
                content: '';
                position:absolute;
                border-color: #fff;
                border-style: solid;
                border-width: 0 2px 2px 0;
                top: 10px;
                left: 16px;
                transform: rotate(45deg);
                height: 15px;
                width: 7px;
            }

            .close{
                position: absolute;
                right: 0;
                top: 0;
                padding: 12px 16px 12px 16px;
            }
            .close:hover{
                background-color: #f44336;
                color: white;   
            }
            /* Style the header */
            .header {
                background-color: #f44336;
                padding: 30px 40px;
                color: white;
                text-align: center;
            }

            /* Clear floats after the header */
            .header:after {
                content: "";
                display: table;
                clear: both;
            }

            input{
                margin: 0;
                border: none;
                border-radius: 0;
                width: 75%;
                padding: 10px;
                float: left;
                font-size: 16px;
            }

            .bt{
                padding: 10px;
                width: 25%;
                background: #d9d9d9;
                color: #555;
                float: left;
                text-align: center;
                font-size: 16px;
                cursor: pointer;
                transition: 0.3s;
                border-radius: 0;
            }
            .bt:hover{
                background-color: #bbb;
            }
        </style>

    </head>
    <body>
        <div id="myDIV" class="header">
            <h2>My To do List</h2>
            <input type="text" id="myInput" placeholder="Todo..."/>
            <span onclick="newElement()" class="bt">Add</span>
        </div>

        <ul id="myUL">
            <li>gym</li>
            <li class="checked">javascript</li>
            <li>sleep</li>
        </ul>

        <script type="text/javascript">

                var myList = document.getElementsByTagName('li');
                var i;

                for(i=0;i<myList.length;i++){
                    var span = document.createElement('span');
                    var txt = document.createTextNode("\u00D7"); 
                    span.className='close';
                    span.appendChild(txt);
                    myList[i].appendChild(span);
                }

                var close = document.getElementsByClassName('close');
                var i;
                for(i=0;i<close.length;i++){
                    close[i].onclick = function(){
                        var div = this.parentElement;
                        div.style.display = 'none';
                    }
                }

                var list = document.querySelector('ul');
                //addEventListener():
//              Attach a click event to a <button> element. When the user clicks on the button, output "Hello World" in a <p> element with id="demo":  
//              document.getElementById("myBtn").addEventListener("click", function(){
//                  document.getElementById("demo").innerHTML = "Hello World";
//              });
                list.addEventListener('click',function(ev){
                    if(ev.target.tagName === 'li'){
                        ev.target.classList.toggle('checked'); 
                    }
                },false);

                function newElement(){
                    var li = document.createElement('li');
                    var inputValue = document.getElementById('myInput').value;
                    var t = document.createTextNode(inputValue);
                    li.appendChild(t);//把輸入的東西變成li的子元素
                    if(inputValue === ''){
                        alert('你一定要寫東西!')
                    }else{
                        document.getElementById('myUL').appendChild(li);
                    }
                    document.getElementById('myInput').value='';

                    var span = document.createElement('span');
                    var txt = document.createTextNode('\u00D7');
                    span.className = 'close';
                    span.appendChild(txt);
                    li.appendChild(span);

                    for(i=0;i<close.length;i++){
                        close[i].onclick = function(){
                            var div = this.parentElement;
                            div.style.display = 'none';
                        }
                    }
                }

        </script>
    </body>
</html>

有关Javascript的语法错误

1 个答案: