By GokiSoft.com| 20:03 23/03/2021|

Học JQuery

Bài tập - Sử dụng bootstrap + jquery - Xử lý event - Lập trình Bootstrap/jQuery

Khi người dùng click vào "Nhập Giá Trị A", "Nhập Giá Trị B" => Xuất hiện prompt để nhập dữ liệu tương ứng

Khi người dùng click vào In Kết Quả -> Hiển thị alert về kết quả tính toán được.

Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Trần Thị Khánh Huyền

2020-11-03 03:31:41

#2060.html

<!DOCTYPE html>
<html>
<head>
	<title>Giải Phương Trình Bậc 1</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial - scale=1.0">
	<style>
		.main{
			border: 1px solid blue;
			border-radius: 5px;
			width: 100%;
			height:80px;
			display: block; 
		}
		.top{
			background-color: blue;
			height: 30px;
			padding-left: 5px;
			padding-top: 5px;
			color: white;
		}
		ul{
			display: flex;
			list-style-type: none;
		}
		li{
			border: 1px solid #7ab369;
			background-color: #7ab369;
			border-radius: 5px;
			padding: 5px;
			margin-right: 10px;
			margin-top: -7px;
			color: white;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class ="top">
			Giải Phương Trình Bậc 1
		</div>
		<div>
			<ul>
				<li id="InputA">Nhập giá trị A</li>
				<li id="InputB">Nhập giá trị B</li>
				<li id="Result">In Kết Quả</li>
			</ul>
		</div>
	</div>
<!-- jQuery library -->	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		var A, B, x;
		$('#InputA').click(function(){
			 A=prompt("Nhập giá trị A:")
		})
		$('#InputB').click(function(){
			 B=prompt("Nhập giá trị B:")
		})
		$('#Result').click(function(){
			if (A==0) {
				if (B==0) {alert('PTVSN')}
					else(alert('PTVN'));
			}else{	
		
				C=-B/A;
				alert('Phương trình có nghiệm: '+C)}
				})
	</script>
</body>
</html>

Nguyên Phấn Đông

2020-11-02 12:02:53

#test.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	<meta name='viewport' content='width=device-width, initial-scale=1'>
	<script src='https://kit.fontawesome.com/a076d05399.js'></script>
	<style type="text/css">
     .navbar-nav .nav-item a:hover{
     	background: yellow;
     	border: 9px !important;
     }
     .float-left{
     	background-color: black !important;
     }
    .khung{
    	border: 1px solid #d9d9d4 !important;
		background-color: #dbd5d5 !important;
		

    }
    .card1{
background-color: #dbd5d5 !important;
    }
	</style>
</head>
<body>
	<nav class="navbar navbar-expand-sm bg-dark" style="color: white;">
		<ul class="navbar-nav">
			<li class="nav-item" style="margin-left: 50px; margin-top: 4px;">Hàng thật - giá chuẩn - Phục vụ tận tâm</li>
			<li class="nav-item" style="margin-left: 200px; margin-top: 4px;">
				<i class="fas fa-phone-alt" style="color: yellow"></i>
				Hotline: 0974 576 809 . 0911 545 121 . 0987 425 657
			</li>
			<li class="nav-item" style="margin-left: 100px;">
				<form class="form-inline" action="/action_page.php">
    				<input class="form-control mr-sm-2" type="text" placeholder="Search">
    				<button class="btn btn-success" type="submit" style="color: yellow;"><i class="fas fa-search" ></i></button>
  				</form>
			</li>
		</ul>
	</nav>
	<nav class="navbar navbar-expand-sm">
		<a class="navbar-brand" href="#" style="margin-left: 104px; padding-right: 20px;">
			<img src="https://donghosomot.com/Styles/images/logo-header.png" alt="logo">
		</a>
		<ul class="navbar-nav" style="margin-left: 248px;"><i class="fas fa-home" style="color: yellow;padding-bottom: 2px;padding-top: 10px;padding-right: 6px;"></i>
			<li class="nav-item">

				<a href="#" class="nav-link" style="color: black;color: black;padding-bottom: 20px;padding-top: 20px;">ĐỒNG HỒ NAM</a>
			</li>
			<li class="nav-item">
				<a href="#" class="nav-link" style="color: black;color: black;padding-bottom: 20px;padding-top: 20px;">ĐỒNG HỒ NỮ</a>
			</li>
			<li class="nav-item">
				<a href="#" class="nav-link" style="color: black;color: black;padding-bottom: 20px;padding-top: 20px;">ĐỒNG HỒ ĐÔI</a>
			</li>
			<li class="nav-item">
				<a href="#" class="nav-link" style="color: black;color: black;padding-bottom: 20px;padding-top: 20px;">MẪU HOT NHẤT</a>
			</li>
			<li class="nav-item">
				<a href="#" class="nav-link" style="color: black;color: black;padding-bottom: 20px;padding-top: 20px;">SALE</a>
			</li>
			<li class="nav-item">
				<a href="#" class="nav-link" style="color: black;color: black;padding-bottom: 20px;padding-top: 20px;">BLOG</a>
			</li>
		</ul>
	</nav>
	<img src="https://donghosomot.com/FileUpload/Images/banner_hourglass_xpx.png" class="mx-auto d-block">
	<div class="container" style="margin-top: 20px;">
		<div class="float-left card bg-dark">
			<div class="card-header text-white">
				DANH MỤC SẢN PHẨM
			</div>
			<div class="card-body text-white">
				<ul>
					<li>
						<a href="#" class="nav-link" style="color: white;">Edox</a>
					</li>
					<li>
						<a href="#" class="nav-link" style="color: white;">Michael Kors</a>
					</li>
					<li>
						<a href="#" class="nav-link" style="color: white;">Mare by Mare Jacobs</a>
					</li>
					<li>
						<a href="#" class="nav-link" style="color: white;">Burberry</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Bulova</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Bulova Accutron</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Calvin Klein</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">DKNY</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Frederique Constant</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Gucci</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Hamilton</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Longines</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Maurice Lacroix</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Montblanc</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Movado</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Omega</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Oris</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Rado</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Raymond Weil</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Skagen</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Swarovski</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">TAG Heuer</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Tissot</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Victorinox Swiss Army</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Lacoste</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Zenith</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Charmex</a>
					</li>
					<li>
						<a href="" class="nav-link" style="color: white;">Seico</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="card-body bg-light khung">
			<div class="container-fluid">
				<div class="row">
					<div class="col card1 card">
						<a href="#" class="nav-link">
							<img src="https://donghosomot.com/FileUpload/Images/thumb/sl_10.jpg">
						</a>
						<p>Đồng hồ nam Calvin Klein Infinite K5S346G6</p>
						<button style="width: 200px; margin-left: 20px; background-color: black;"><a href="#" class="nav-link" style="color: white; padding-left: -20px;">Giá: Liên hệ <i class="fas fa-phone-volume"></i></a></button>
					</div>
					<div class="col card1 card">
						<a href="#" class="nav-link">
							<img src="https://donghosomot.com/FileUpload/Images/thumb/dongholomayseikossakchonamcdd_result.png">
						</a>
						<p>Đồng hồ nam Frederique Constant Slimline FC-235M4S4</p>
						<button style="width: 200px; margin-left: 20px; background-color: black;"><a href="#" class="nav-link" style="color: white; padding-left: -20px;">Giá: Liên hệ <i class="fas fa-phone-volume"></i></a></button>
					</div>
					<div class="col card1 card">
						<a href="#" class="nav-link">
							<img src="https://donghosomot.com/FileUpload/Images/thumb/sl_result_3.png">
						</a>
						<p>Đồng hồ nam Orient Sun And Moon RA-AK0304B10B</p>
						<button style="width: 200px; margin-left: 20px; background-color: black;"><a href="#" class="nav-link" style="color: white; padding-left: -20px;">Giá: Liên hệ <i class="fas fa-phone-volume"></i></a></button>
					</div>
					
				</div>
			</div>
			<div class="container-fluid" style="margin-top: 30px;">
				<div class="row">
					<div class="col card1 card">
						<a href="#" class="nav-link">
							<img src="https://donghosomot.com/FileUpload/Images/thumb/dong_ho_orient_raakbb_result.jpg">
						</a>
						<p>Đồng hồ nam Orient Sun And Moon RA-AK0303L10B</p>
						<button style="width: 200px; margin-left: 20px; background-color: black;"><a href="#" class="nav-link" style="color: white; padding-left: -20px;">Giá: Liên hệ <i class="fas fa-phone-volume"></i></a></button>
					</div>
					<div class="col card1 card">
						<a href="#" class="nav-link">
							<img src="https://donghosomot.com/FileUpload/Images/thumb/raaklb_result.jpg">
						</a>
						<p>Đồng hồ nữ Orient RA-KA0006S00B</p>
						<button style="width: 200px; margin-left: 20px; background-color: black;"><a href="#" class="nav-link" style="color: white; padding-left: -20px;">Giá: Liên hệ <i class="fas fa-phone-volume"></i></a></button>
					</div>
					<div class="col card1 card">
						<a href="#" class="nav-link">
							<img src="https://donghosomot.com/FileUpload/Images/thumb/efeeeadecaaad_result.jpg">
						</a>
						<p>Đồng hồ nữ  Versace Mini Vanity VEAA00218</p>
						<button style="width: 200px; margin-left: 20px; background-color: black;"><a href="#" class="nav-link" style="color: white; padding-left: -20px;">Giá: Liên hệ <i class="fas fa-phone-volume"></i></a></button>
					</div>
					
				</div>
			</div>
			<div class="container-fluid padding" style="margin-top: 30px;">
				<div class="row padding">
					<div class="col-md-4 card1 card">
						
						<a href="#" class="nav-link">
							<img src="https://donghosomot.com/FileUpload/Images/thumb/sl_result_61.jpg">
						</a>
						<p class="card-text">Đồng hồ nữ Versace V-Circle VE8100118</p>
						<button style="width: 200px; margin-left: 20px; background-color: black;"><a href="#" class="nav-link" style="color: white; padding-left: -20px;">Giá: Liên hệ <i class="fas fa-phone-volume"></i></a></button>
					
				</div>
					<div class="col-md-4 card1 card">
						<a href="#" class="nav-link">
							<img src="https://donghosomot.com/FileUpload/Images/thumb/sl_result_60.jpg">
						</a>
						<p>Đồng hồ nam Girard Perregaux Vintage 1945 25850-0-52-1051</p>
						<button style="width: 200px; margin-left: 20px; background-color: black;"><a href="#" class="nav-link" style="color: white; padding-left: -20px;">Giá: Liên hệ <i class="fas fa-phone-volume"></i></a></button>
					</div>
					<div class="col-md-4 card1 card">
						<a href="#" class="nav-link">
							<img src="https://donghosomot.com/FileUpload/Images/thumb/sl__result_232.jpg">
						</a>
						<p>Đồng hồ nữ Versace Greca Icon VELU00619</p>
						<button style="width: 200px; margin-left: 20px; background-color: black;"><a href="#" class="nav-link" style="color: white; padding-left: -20px;">Giá: Liên hệ <i class="fas fa-phone-volume"></i></a></button>
					</div>
					
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid padding">
		<div class="row text-center padding">
			<div class="col-12">
				<img src="https://donghosomot.com/Styles/images/logo-header.png" alt="logo">
				<a href="#"><i class="fas fa-facebook"></i> </a>
				<a href="#"><i class="fas fa-twitter"></i> </a>
			</div>
		</div>
	</div>
</body>
</html>

Triệu Văn Lăng

2020-11-02 10:09:19

#bai2060.html

<!DOCTYPE html>
<html>
<head>
	<title>tinh</title>
	<meta charset="utf-8">
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	<style type="text/css">
		button {
			background-color: green;
			color: white;
			border-radius: 15px;
		}
	</style>	
</head>
<body>
	<div class="container border-primary" style="margin-top: 20px;">
		<div class="card-header bg-primary text-white">
			Giải Phương Trình Bậc I
		</div>
		<div class="card-body">
			<button id="input1">Nhập giá trị a</button>
			<button id="input2">Nhập giá trị b</button>
			<button id="show">In kết quả</button>
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
			$('#input1').click(function() {
				a=prompt('nhập giá trị a')
				a=parseInt(a)
			})
			$('#input2').click(function(){
				b=prompt('nhập giá trị b')
				b=parseInt(b)
			})
			$('#show').click(function(){
				s=a+b;
				alert("tổng là "+s)
			})

		})
	</script>
</body>
</html>

Trần Văn Lâm

2020-11-02 10:08:42

#bai1.html

<!DOCTYPE html>
<html>
<head>
	<title>Phuong Trinh Bac 1</title>
	<meta charset="utf-8">
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body>
	<div class="card">
		<div class="card-header bg-primary" style="color: white;">
			Giải Phương Trình Bậc 1
		</div>
	</div>
	<div style="margin-top: 10px; margin-left: 20px;">
		<button type="button" class="btn bg-success" onclick="NhapA()" id="cr7">Nhập Giá Trị A</button>
		<button type="button" class="btn bg-success" onclick="NhapB()" id="m10">Nhập Giá Trị B</button>
		<button type="button" class="btn bg-success" onclick="Result()" id="l8">In Kết Quả</button>
	</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    	var A;
    	function NhapA(){
    		A = prompt('Nhập A')
    	}
    	var B;
    	function NhapB(){
    		B = prompt('Nhập B')
    	}
    	function Result(){
    		if (A==0) {
    			if (B==0) {
    				alert('PTVSN')
    			}else{
    				alert('PTVN')
    			}
    		}else{
    			X=-B/A
    			alert(X)
    		}
    	}
        $(function(){
        	$('button').css('color', 'white')
        })
    </script>
</body>
</html>

nguyễn Sử

2020-11-02 10:02:36

#JQuerybaitap1.html

<!DOCTYPE html>
<html>
<head>
	<title>Bài tập 1</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
	<!-- https://fontawesome.com/icons?from=io -->
</head>
<body>
	<div class="container">
		<table class="table table-bordered">
			<tbody>
				<thead>
					<tr class="table-primary">
						<th colspan="3"> Giải Phương Trình Bậc 1 </th>
					</tr>
					<form>
						<th><button  id="gta" type="button" class="btn btn-Giá Trị a" style="background-color: #30f036"> Giá Trị A </button></th>
						<th><button id="gtb" type="button" class="btn btn-Giá Trị b" style="background-color:#30f036 "> Giá Trị B </button></th>
						<th><button id="kq" type="button" class="btn btn-Kết Quả" style="background-color:#30f036;"> Kết Quả </button></th>
					</form>
				</thead>
			</tbody>
		</table>
	</div>
	<script type="text/javascript">
		var a;
		$('#gta').click(function(){
			a=prompt("nhập số A")
		})
		var b;
		$('#gtb').click(function(){
			a=prompt("nhập số B")
		})
		var kq;
		$('#kq').click(function(){
				var kq = a + b;
		alert("ket qua = "+ kq)
		})

	</script>

</body>
</html>

Bùi Văn Mạnh

2020-11-02 09:55:12

#bai1.html

<!DOCTYPE html>
<html lang="en">
<head>	
	<title>Phuong trinh bac 1</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
	<div class="card">	
		<div class="card-header bg-primary text-white">Giải Phương Trình Bậc 1</div>
		<div class="card-body">
			<button type="button" class="btn btn-success" id="nhap_a">Nhập Giá Trị A</button>
			<button type="button" class="btn btn-success" id="nhap_b">Nhập Giá Trị B</button>
			<button type="button" class="btn btn-success" id="ketqua">In Ra Kết Quả</button>
		</div>
	</div>	
	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

	<script type="text/javascript">
		var a, b, c;
		$("#nhap_a").click(function() {
			a = prompt("input a: ")
		})
		$("#nhap_b").click(function() {
			b = prompt("input b: ")
		})
		$("#ketqua").click(function() {
			c = b / a;
			alert("Kết Quả: " + c)
		})
	</script>
</body>
</html>

Đức Sơn

2020-11-02 09:42:31

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		h3{
			background-color: #3580a6;
		}
		#N{
			background-color: #78cf90;
		}
		#M{
            background-color: #78cf90;
		}
		#V{
            background-color:#78cf90 ;
		}
	</style>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

</head>
<body>
<h3>Giải phương trình bậc 1</h3>

<button onclick="click_1()" class="btn btn-outline-dark" id="N">Nhập giá trị A</button>
<button onclick="click_2()" class="btn btn-outline-dark" id="M">Nhập giá trị B</button>
<button onclick="click_3()" class="btn btn-outline-dark" id="V">In kết quả</button>

<script type="text/javascript">
	var a,b
	function click_1(){
		a=prompt('Nhập giá trị a')
	}
	function click_2(){
		b=prompt('Nhập giá trị b')
	}
	function click_3(){
		hieu= a-b;
		alert("Ket qua a va b la:"+ hieu)
	}
</script>
</body>
</html>

vuong huu phu

2020-11-02 09:42:10

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style type="text/css"> 
  </style>
</head>
<body>
	<div class="container">
		<table class="table table-bordered">
			<thead>
			<tr class="table-primary">
				<th colspan="3">Giải phương trình bậc 1</th>
			</tr>
			</thead>
			<tbody>
			<tr><form>
				<td><button id="nhapa" type="button" class="btn btn-success">Nhập Giá Trị A</button>
				<button id="nhapb" type="button" class="btn btn-success">Nhập Giá Trị B</button>
				<button id="ketqua" type="button" class="btn btn-success"> In Kết Quả</button></td>
			</form></tr>
			</tbody>
		</table> 
	</div>

<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
	var a,b;
	$('#nhapa').click(function() {
       a = prompt("nhap so a")
	})
	$('#nhapb').click(function() {
       b = prompt("nhap so b")
	})
	$('#ketqua').click(function() {
		var x=eval(a)
		var y=eval(b)

		var t = y + x;
		alert("ket qua = "+ t)

		})



</script>
</body>
</html>

Đỗ Minh Quân

2020-11-02 09:37:36

#BT1.html

<!DOCTYPE html>
<html>
<head>
  <title>Bai 1 | JQuery - Bootstrap</title>
  <meta charset="utf-8">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

  <!-- FontAwesome -->
  <script src="https://kit.fontawesome.com/18bc5ffef0.js" crossorigin="anonymous"></script>
</head>
<body>
  <div class="container mt-5">
    <div class="card">
      <div class="card-header bg-dark text-white">
        Giải phương trình bậc 1
      </div>
      <div class="card-body">
        <div class="row">
          <button class="btn btn-success m-2" id='nhap_a'>Nhập Giá Trị A</button>
          <button class="btn btn-success m-2" id='nhap_b'>Nhập Giá Trị B</button>
          <button class="btn btn-success m-2" id='output'>In Kết Quả</button>
        </div>
      </div>
    </div>
    <div class="alert alert-success">
    <strong>Warning!!!</strong> Hãy điền đúng số nhé !
  </div>

  <script>
    var a, b, c;
    $("#nhap_a").click(function() {
      a = prompt("input a: ")
    })
    $("#nhap_b").click(function() {
      b = prompt("input b: ")
    })
    $("#output").click(function() {
      c = b / a;
      alert("Kết Quả: " + c)
    })
  </script>
</body>
</html>

An Văn Minh

2020-11-02 09:35:07

<!DOCTYPE html>
<html>
<head>
	<title>Baitap1</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css">
	<style type="text/css">
		.card-header{
			background-color: #491ef7;
		}
		.card-body{
			float: left;
		}
	</style>
</head>
<body>
	<div class="card">
		<div class="card-header">Giai phuong trinh bac 1</div>
		<div class="card-body">
			<a name="" class="btn btn-success" id="inputA" href="#" role="button">Nhap A</a>
			<a name="" class="btn btn-success" id="inputB" href="#" role="button">Nhap B</a>
			<a name="" class="btn btn-success" id="Result" href="#" role="button">Ket Qua</a>
		</div>
	</div>
	
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<script type="text/javascript">
		var count=0
		$('#inputA').click(function(){
			a=prompt('Nhap A')
			count++
		});
		$('#inputB').click(function(){
			b=prompt('Nhap B')
			count++
		});
		$('#Result').click(function(){
			if(count==2){
				if(a==0){
					if (b==0) {
						alert('PTVSN')
					}else {alert('PTVN')}
				}else{
					x=-b/a
					alert('PT co nghiem la'+x)
				}
			}else{
				alert('Ban can nhap du lieu!!')
				}
		});
		
	</script>
</body>
</html>

Bài tập - Sử dụng bootstrap + jquery - Xử lý event - Lập trình Bootstrap/jQuery

Tags:

Phản hồi từ học viên

5

Trần Thị Khánh Huyền

#2060.html

Nguyên Phấn Đông

#test.html

Triệu Văn Lăng

#bai2060.html

Trần Văn Lâm

#bai1.html

nguyễn Sử

#JQuerybaitap1.html

Bùi Văn Mạnh

#bai1.html

Đức Sơn

vuong huu phu

Đỗ Minh Quân

#BT1.html

An Văn Minh