30/09/2018, 18:22

Bài tập web làm với jquery nhưng không chạy mọi người xem giú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>

I LOVE CODE viết 20:38 ngày 30/09/2018

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();
    });
});

viết 20:34 ngày 30/09/2018

mình nghĩ $(document).ready(function(){}) chỉ là load xong web thì mới thực hiện câu lệnh bên trong ? Mà mình thay vào cũng không chạy được .

Le Hoai viết 20:31 ngày 30/09/2018

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

$("#select1").options

Thay lệnh này bằng

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

Gió viết 20:33 ngày 30/09/2018

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>

viết 20:33 ngày 30/09/2018

ok rồi tks mọi người

viết 20:35 ngày 30/09/2018

tại sao result =$(“id”)[0]; lại là [0] mà không phải là 1 số khác ?

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

0 chủ đề

0 bài viết

Tác giả nổi bật