Kiểm tra một từ có trong danh sách hay không

#1

Em đang tự học về web . Học html và css thì hiểu , đến phần javascript thì ít hiểu đi rồi .

Em học bằng cách vừa học vừa làm bài tập nhưng chưa làm được bài nào vì chưa có ý tưởng gì để giải quyết bài tập nên em lên đây thử xin 1 ví dụ về giải quyết bài tập .

Ví dụ : 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

Untitled.png1366×768 15.1 KB

#2

Giao diện đâu :smiling_imp:

Bớ cao thủ js vào giúp :smile:

#3

Em mới tạo topic đầu có gì a sửa giúp em nha . tks a :smiley:

1 Like
#4

Đầu tiên phải học về DOM
link tham khảo
http://www.w3schools.com/js/js_htmldom.asp

Học cái này để thao tác các đối tượng trên HTML

Khi nào em lấy được giá trị của textbox và textarea rồi tính tiếp lấy 2 giá trị đó so sánh với nhau.

2 Likes
#5

cho em hỏi cái document.getElementById().innerHTML không lấy được value từ textbox và textarea phải không ?

1 Like
#6

uh, không được.
thuộc tính innerHTML chỉ lấy được giá trị đã hiện thị trên HTML.
textbox và textarea là input

2 Likes
#7

Ok a , em hiểu r :smiley:

1 Like
#8

đợi tí đang rảnh a code mẫu cho luôn :v

2 Likes
#9

code đơn giản để kiểm tra:

var list=["one","two","three"];

var hash={};
for(var i=0;i<list.length;i++){
    hash[list[i]]=true;
}

function check(txt){
    return !!hash[txt];
}
2 Likes
#10

Code đây:
index.html:

<!doctype html>
<html lang="en">

<head>
  <title>Javacsript</title>
  <link rel="stylesheet" href="./index.css"></link>
</head>

<body>
  <div class="main">
    <div class="left">
      <p>Nhap mot tu tieng anh:</p>
      <p><input type="text" id="word"/></p>
      <p><input type="button" id="submit" value="Kiem Tra" onclick="checkWord()"/><p>
    </div>

    <div class="right">
      <textarea rows="30" cols="50" id="list">
      
      </textarea>
    </div>
  </div>

  <script src="./index.js" type="text/javascript"></script>
</body>
</html>

index.css:

body {
  padding-top: 50px;
  background-color: #000000;
  margin: 0;
}

.main {
	position: relative;
	margin: auto;
	padding: 10px;
    width: 40%;
    background-color: #ffffff;
    height: 500px;
}

.right {
    position: absolute;
    right: -10px;
    width: 60%;
}

.left {
    position: absolute;
    left: -10px;
    width: 40%;
    text-align: right;
}

index.js:

var data = ["Hello", "Welcome", "Hi"];
window.onload = function() {
	document.getElementById("word").value = "";
	refreshList();
}

var checkWord = function() {
	var list = document.getElementById("list");
	var word = document.getElementById("word");
	var index = getIndex(word.value);

	if (index != -1) {
		if (confirm("Tu nay da co o muc " + (index + 1) + ", ban co muon xoa khoi danh sach?")) {
		    data.splice(index, 1);
		    refreshList();
		}
	} else {
		data.push(word.value);
		refreshList();
	}
	word.value = "";
}

var getIndex = function(word) {
	for (var i=0; i<data.length; i++) {
		if (word.toLowerCase() === data[i].toLowerCase()) {
			return i;
		}
	}	
	return -1;
}

var refreshList = function() {
	var list = document.getElementById("list");
	list.innerHTML = "";
	for (var i=0; i<data.length; i++) {
		list.innerHTML = list.innerHTML + data[i] + "\n";
	}
}
3 Likes
#11

Em xin cám ơn mọi người :blush:

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