Code web làm với jquery không chạy

#1

Bài tập web làm với jquery nhưng không chạy mọi người xem giúp với

Hãy tạo trang web có giao diện như dưới đây, khi nhập một từ tiếng Anh vào trong ô textbox, bấm nút Kiểm tra sẽ thực hiện kiểm tra xem từ đó có trong danh sách bên cạnh không, nếu không có thì thêm vào; nếu có thì báo đó là mục số mấy và hỏi có xóa mục đó trong danh sách không, nếu trả lời có thì xóa mục đó, nếu không thì bỏ qua.

<html>

<head>
    <meta charset="UTF-8">
    <title> Exam 1</title>
    <script language="javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <style>
        select {
            width: 150px;
        }
    </style>
</head>

<body>
    <div align="center">
        <form name="form1">
            <table>
                <tr align="right">
                    <td valign="top">
                        Nhập một từ Tiếng Anh
                        <br>
                        <input type="text" size="30px" name="abc" id="inputString">
                        <br>
                        <input type="button" id="view" value="Kiểm tra">

                    </td>
                    <td>
                        <select size="10" id="select1">

                        </select>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <script>
        $("#view").click(function() {
            var boxLength = $("#select1").length;
            var inputString = $("#inputString").value;
            if (inputString == "") {
                alert("Không được để trống -_-");
            } else {
                if (checkExist(inputString) == 1) {
                    var newOption = new Option(inputString, inputString);
                    $("#select1").options[boxLength] = newOption;
                } else {
                    var cf = confirm("Tu " + inputString + " đã tồn tại ở vị trí " + checkPos(inputString) + " bạn muốn xóa không?");
                    if (cf == true) {
                        $("#select1").remove(checkPos(inputString));
                    }
                }
                $("#inputString").value = "";
            }
        });

        function checkExist(inputString) {
            var boxLength = $("#select1").length;
            for (var i = 0; i < boxLength; i++) {
                if ($("#select1").options[i].text == inputString) {
                    return 0;
                }
            }
            return 1;
        }

        function checkPos(inputString) {
            var boxLength = $("#select1").length;
            for (var i = 0; i < boxLength; i++) {
                if ($("#select1").options[i].text == inputString) {
                    return i;
                }
            }
            return 0;
        }
    </script>
</body>

</html>
#2

bạn thiếu $(document).ready(function(){}) bạn nhé. bạn tham khảo cái này nhé

$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});
#3

mình nghĩ $(document).ready(function(){}) chỉ là load xong web thì mới thực hiện câu lệnh bên trong ? Mà mình thay vào cũng không chạy được .

#4

Không select được như thế này bạn nhé.

$("#select1").options

Thay lệnh này bằng

var options= $("#select1").children();
#5

Các selector của jQuery sẽ trả về 1 Array nên lấy theo id sẽ có dạng result =$("id")[0];

var inputString = $("#inputString")[0].value;
... select1=$("#select1")[0]....

Sửa lại

<html>

<head>
    <meta charset="UTF-8">
    <title> Exam 1</title>
    <script language="javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <style>
        select {
            width: 150px;
        }
    </style>
</head>

<body>
    <div align="center">
        <form name="form1">
            <table>
                <tr align="right">
                    <td valign="top">
                        Nhập một từ Tiếng Anh
                        <br>
                        <input type="text" size="30px" name="abc" id="inputString">
                        <br>
                        <input type="button" id="view" value="Kiểm tra">

                    </td>
                    <td>
                        <select size="10" id="select1">

                        </select>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <script>
        $("#view").click(function() {
            var boxLength = $("#select1")[0].length;
            var inputString = $("#inputString")[0].value;
            if (inputString == "") {
                alert("Không được để trống -_-");
            } else {
                if (checkExist(inputString) == 1) {
                    var newOption = new Option(inputString, inputString);
                    $("#select1")[0].options[boxLength] = newOption;
                } else {
                    var cf = confirm("Tu " + inputString + " đã tồn tại ở vị trí " + checkPos

(inputString) + " bạn muốn xóa không?");
                    if (cf == true) {
                        $("#select1")[0].remove(checkPos(inputString));
                    }
                }
                $("#inputString")[0].value = "";
            }
        });

        function checkExist(inputString) {
            var boxLength = $("#select1")[0].length;
            for (var i = 0; i < boxLength; i++) {
                if ($("#select1")[0].options[i].text == inputString) {
                    return 0;
                }
            }
            return 1;
        }

        function checkPos(inputString) {
            var boxLength = $("#select1")[0].length;
            for (var i = 0; i < boxLength; i++) {
                if ($("#select1")[0].options[i].text == inputString) {
                    return i;
                }
            }
            return 0;
        }
    </script>
</body>

</html>
2 Likes
#6

ok rồi tks mọi người

#7

tại sao result =$(“id”)[0]; lại là [0] mà không phải là 1 số khác ?

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?