30/09/2018, 18:15

Học Javascript bằng bài tập, kiểm tra một từ có trong danh sách hay không?

Em đang tự học về web . Học html và css thì hiểu , đến phần javascript thì ít hiểu đi rồi .

Em học bằng cách vừa học vừa làm bài tập nhưng chưa làm được bài nào vì chưa có ý tưởng gì để giải quyết bài tập nên em lên đây thử xin 1 ví dụ về giải quyết bài tập .

Ví dụ : 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

Mai Anh Dũng viết 20:30 ngày 30/09/2018

Hãy tạo trang web có giao diện như dưới đây,

Giao diện đâu

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

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

Em mới tạo topic đầu có gì a sửa giúp em nha . tks a

vũ xuân quân viết 20:28 ngày 30/09/2018

Đầ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.

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

cho em hỏi cái document.getElementById().innerHTML không lấy được value từ textbox và textarea phải không ?

vũ xuân quân viết 20:28 ngày 30/09/2018

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

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

Ok a , em hiểu r

Cương Nguyễn viết 20:28 ngày 30/09/2018

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

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

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];
}

Cương Nguyễn viết 20:22 ngày 30/09/2018

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";
	}
}

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

Em xin cám ơn mọi người

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